HTML5&CSS3——让你的页面美如画（7）

5.CSS3动画

（1）Animations动画机制（未稳定机制，使用时需保证浏览器兼容性）

 Animations是CSS3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。

通过@keyframes来设置动画序列，序列中每个关键帧描述动画元素在动画序列的特定时间内表现出怎样的效果。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间，也可以通过from关键字表示。100%表示动画的结束时间，也可以通过to关键字表示。如：

@keyframes slidein{
    from{    /*或0%*/
        margin-left: 100%;
        width: 300%;
    }
/*可存在多个中间值，如20%、30%、50%等*/
    to{    /*或100%*/
        margin-left: 0%;
        width: 100%;
    }
}
p{
animation-duration: 3s; 
animation-name: slidein; 
}

 

动画属性配置（加在设置了动画的元素上的样式）

animation-name：动画名字。可以与@keyframes中定义的名字绑定。

 animation-duration：动画持续时间（动画完成一个循环所需的时间长度 ）。单位s 、ms ,默认值为0s 。

animation-iteration-count：动画重复的次数。默认值为1，不能为负数，可以为小数，比如0.5表示播放一半，infinite值表示无限循环。

animation-delay：动画延迟（元素在加载成功后到动画运行前的时间）。单位为s 、ms ,默认值为0s，即动画加载成功后立刻运行。

animation-direction：动画方向（以及动画运行完是否交替方向或者是重置起点）。默认正常播放值为normal，reverse表示播放帧的顺序反转，播放的起点为帧的结束，alternate表示播放帧的顺序交替反转，即第一次播放从帧的开始播放到帧的结束，第二次播放就从帧的结束播放到帧的开始，与此同时，速度曲线也交替反转（ease-in交替为ease-out），alternate-reverse与alternate类似，不过第一次播放时候需要反转。

animation-play-state：动画的状态，可以通过Js查询（或设置）该属性以确定该动画目前是运行还是停止，running表示运行状态，paused表示暂停状态。

animation-fill-mode：动画填充模式。指定了CSS动画在执行前和执行后如何将样式应用到它的目标上。默认值是none，forwards表示目标将保留在执行期间所遇到的最后一个关键帧所设置的计算值，backwards表示目标将保留在执行期间所遇到的第一个关键帧所设置的计算值。

animation-timing-function：动画的速度曲线。默认值为ease（类似先快后慢的运动效果），ease-in表示先慢后快，ease-out表示先快后慢，ease-in-out表示先慢后快再慢，linear表示线性增长（匀速）。

 

第三方动画库的引用（https://daneden.github.io/animate.css/）：通过link标签引用特定动画库的在线地址（上述网址可选择在GitHub中查看相应的引用地址），也可通过link标签引用下载后的动画库样式表地址，之后类似引用iconfont字体图标的操作，为元素添加对应类名（上述文件对应添加类名为animated xxx）即可添加动画。

 

（2）Transitions动画机制

transition动画机制和animation动画机制的区别在于

transition动画需要主动触发，一般使用:hover伪元素触发

transition动画没有关键帧控制

所以一般情况下，简单的过渡效果使用transition，复杂的动画使用animation。

 

transition-property——指定过渡的属性，可以指定一个属性、可以指定多个属性、还可以指定所有属性（all）

transition-duration——过渡持续的时间，可以指定秒，或者毫秒

transition-timing-function——过渡的时间曲线（类似animation-timing-function）

transition-delay——过渡延迟，可以指定秒，或者毫秒

transition——速记写法transition:property duration timing delay;

 

（3）变形

对于电脑屏幕视口来说，左上角为原点，往右是X轴正方向，往下是Y轴负方向，往面向电脑的用户方向是Z轴正方向。

 

transform——用来指定一个变形函数对元素执行变形操作

transform-origin——用于指定一个元素变形的原点

如果指定一个值，取值有left、center、right、top、bottom。

如果指定两个值，其中一个必须是length,percentage，或left, center, right关键字中的一个。另一个必须是length,percentage（百分比），或top, center, bottom关键字中的一个。

如果指定三个值，前两个值和只有两个值时的用法相同，第三个值必须是length。它始终代表Z轴偏移量

 

rotate函数定义了一种将元素围绕一个定点旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。

rotateX (45deg)绕X轴旋转45度，rotateY (45deg)绕Y轴旋转45度，rotateZ (45度)绕Z轴旋转45度。rotate ( angle )与rotateZ()一致。

skew(ax,ay)函数表示对元素的剪切或者扭转，ax表示水平方向的扭转角度，ay表示垂直方向的扭转角度，也可以单独使用skewX(ax)和skewY(ay)。

scale()函数能够更改元素的大小，scale变换是通过矢量来实现，它的坐标定义了每个方向上的缩放比例。如果两个向量的坐标是相等的，缩放是均匀的，可只用单值，如scale(2)。

translate(tx, ty)函数能够移动元素。tx为元素在水平方向上移动的距离，ty为元素在垂直方向上移动的距离。