CSS——动画（animation）

一、过渡（transition）

    1、通过过渡可以指定一个属性发生变化时的切换方式

    2、通过过渡可以创建一些非常好的效果，提升用户体验

    3、常用属性值

         ① transition-property          指定要执行过渡的属性

• 多个属性间使用，隔开
• 如果所有属性都需要过渡，则使用all关键字
• 大部分属性都支持过渡，注意过渡时必须是从一个有效值向另外一个有效值进行过渡

         ② transition-duration         指定过渡效果的持续时间

             时间单位： s 和 ms                                  1s=1000ms

         ③ transition-timing-function            过度的时序函数，指定过渡的执行方式

              可选值：      ease   默认值，慢速开始，先加速，再减速

                                 linear   匀速运动

                                 ease-in  加速运动

                                 ease-out  减速运动

                                 ease-in-out  先加速，后减速

                                 cubic-bezier()   指定时序函数                 【函数详见网址    cubic-bezier.com】

                                 steps（）     分步执行过渡效果

                                                     第一个值为数值表示分几步过渡，也可以设置第二个值：end      在时间结束时执行过渡（默认值）

                                                                                                                                         start      在时间开始时执行过渡

         ④ transition-delay              过渡效果的延迟，等待一段时间后再执行过渡

         ⑤ transition         可以同时设置过渡相关的所有属性，如果要写延迟，则两个时间中第一个为过度执行的时间，第二个为延迟的时间，其他属性没有位置要求

二、动画

    1、动画和过渡类似，都是可以实现一些动态的效果，不同的是过度需要在某个属性发生变化时才会触发，动画可以自动触发效果。

    2、设置动画效果，必须先要设置一个关键帧，关键帧设置了东华之星的每一个步骤。

         关键帧语法格式：   @keyframes    关键帧名字{

                                                                             from{属性：数值}

                                                                                  to{属性：数值}

                                                                                }

•         from表示动画的开始位置，也可以使用0%
•         to表示动画的结束位置，也可以使用100%
•         to/from都可以使用具体的百分比确定动画的位置

    3、动画属性（animation）

         ① animation-name       要对当前元素生效的关键帧的名字

         ② animation-duration      动画执行的时间

         ③ animation-delay      动画的延时

         ④ animation-timing-function      动画的时序函数，与过渡类似

         ⑤ animation-iteration-count     动画执行的次数

             可选值：      

                                  次数的数值（1/2/3······）

                                  infinite       无限执行

         ⑥ animation-direction           指定动画运行的方向

             可选值：     

                                  normal     默认值，从from向to运行，每一次都是这样

                                  reverse     从to向from运行，每一次都是这样

                                  alternate    从from向to运行，重复执行动画时反向执行

                                  alternate-reverse        从to向from运行，重复执行动画时反向执行

         ⑦ animation-play-state       设置动画的执行状态

             可选值：

                                  running     默认值，动画执行

                                  paused      动画暂停

         ⑧ animation-fill-mode      动画的填充模式

             可选值：

                                  none  默认值，动画执行完毕元素回到原来的位置

                                  forwards    动画执行完毕元素会停止在动画结束的位置（to的位置）

                                  backwards    动画延时等待时，元素就会出于开始的位置（from的位置）

                                  both     结合了forwards和backwards

         ⑨ animation         可以同时设置过渡相关的所有属性，如果要写延迟，则两个时间中第一个为过度执行的时间，第二个为延迟的时间，其他属性没有位置要求

三、变形

    1、变形就是通过CSS来改变元素的形状或位置

    2、变形不会影响到页面的变形效果

    3、transform     用来设置元素的变形效果

         可选值：

                       ①变形平移（X、Y轴平移）

                                             translateX（）    沿着X轴方向平移

                                             translateY（）    沿着Y轴方向平移

                                             translateZ（）    沿着Z轴方向平移

         △平移元素，百分比是相对于自身计算的。

                       ②z轴平移：调整元素在z轴的位置，正常情况下就是调整元素和人眼之间的距离；距离越大，元素离人越近。

                                          z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要进行z轴平移必须设置网页的视距

四、旋转

    1、 通过旋转可以使元素沿着 x y 或 z 旋转指定的角度

                                             rotateX（）    沿着x轴旋转

                                             rotateY（）    沿着y轴旋转

                                             rotateZ（）    沿着z轴旋转

    2、backface-visibility          可以选择是否显示元素的背面

五、缩放

    1、scale    对元素进行缩放的函数

                     scaleX（）     水平方向的缩放

                     scaleY（）     垂直方向的缩放

                     scale（）       双方向的缩放

    2、transform-origin    变形的原点

本文分享就到这里，下一篇继续分享关于CSS的less的简单内容。