CSS3动画和HTML5新特性的示例分析

tangjin

作者

本文将为大家详细介绍“CSS3动画和HTML5新特性的示例分析”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“CSS3动画和HTML5新特性的示例分析”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

一、css3动画

☺css3动画相对于通过JavaScript动态改变元素样式性能更好，更加容易。CSS3中有三个关于动画的属性：transform、transition和animation。1、transformtransform主要用来改变元素形状：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）和matrix（矩阵变形）。例：

.transform-class{
transform：rotate(30deg)scale(2,3);
}

1.1、transform-origin基点所有变形都基于基点，基点默认为元素的中心点。用法：transform-origin:(x,y)，X、Y可以是百分比、px、rem，也可以是left、right、center（X）和top、center、bottom（Y）。例：

.transform-class{
transform-origin:(left,bottom);
}

1.2、rotate旋转通过指定的角度对元素进行旋转变形，若正数则为顺时针旋转，若负数则为逆时针旋转。例：

.transform-rotate{
transform:rotate(30deg);
}

1.3、scale缩放scale有三种用法：scale(x,y)、scaleX(x)、scale(Y)。缩放比例如果大于1则放大，等于1 为原始大小，小于1则缩小。例：

.transform-scale{
transform:scale(2,1.5);
}

.transform-scaleX{
transform:scaleX(2);
}

.transform-scaleY{
transform:scaleY(1.5);
}

1.4、translate移动translate有三种情况：translate(x,y)、translateX(x)、translateY(y)。例：

.transform-translate{
transform:translate(400px,20px);
}

.transform-translateX{
transform:translateX(300px);
}

.transform-translateY{
transform:translateY(20px);
}

1.5、skew扭曲skew有三种写法：skew(xdeg,ydeg)、skewX(xdeg)、skewY(ydeg)，单位deg为角度。例：

.transform-skew{
transform:skew(30deg,10deg);
}

.transform-skewX{
transform:skewX(30deg);
}

.transform-skewY{
transform:skewY(10deg);
}

1.6、matrix略matrix详述2、transitiontransition是用来设置元素是如何从一种状态平滑到另外一种状态：

transition-property（变换的属性）
transition-duration（变换延续的时间）
transition-timing-function（变换的速率）
transition-delay（变换的延迟）

3、animationanimation比较类似于flash中的逐帧动画，就像电影的播放一样，表现非常细腻并且有非常大的灵活性。而transition只指定了开始和结束状态。逐帧动画由关键帧组成，很多个关键帧的连续播放就组成了动画，在CSS3中是由属性keyframes来完成逐帧动画的。@keyframes

animationName：动画名称（自己命名）
percentage：百分比值 [pəˈsentɪdʒ]
properties：样式属性名称（color、left等）

例：

@keyframesanimationName{
from{
properties:value;
}
percentage{
properties:value;
}
to{
properties:value;
}
}
//or
@keyframesanimationName{
0%{
properties:value;
}
percentage{
properties:value;
}
100%{
properties:value;
}
}

二、H5新特性