动画的过渡、关键帧、变形

一动画的过渡

过渡（transition）

• 通过过渡可以指定一个属性发生变化时的切换方式
• 通过过渡可以创建一些非常好的效果，提升用户的体验

transition-property:

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

transition-duration:

• 指定过渡效果的持续时间
•  时间单位：s 和 ms  1s = 1000ms

transition-timing-function: 过渡的时序函，指定过渡的执行的方式  
                可选值：

•                     ease 默认值，慢速开始，先加速，再减速
•                     linear 匀速运动
•                     ease-in 加速运动
•                     ease-out 减速运动
•                     ease-in-out 先加速 后减速
•                     cubic-bezier() 来指定时序函数

   https://cubic-bezier.com

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

transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
                    

或者：

二、动画关键帧

由于动画设置的是偏移量的改变，因此需要开启该元素的相对定位

或者

设置关键帧     0%相当于from    100%相当于to   百分比可以是任意0~100之间任意的整数

三、动画的变形

 第一类：  平移

                translateX(像素)： 即沿着X轴平移，正值向右平移，负值向左平移

                translateY(像素)： 即沿着Y轴平移，正值向下平移，负值向上平移

                translateZ(像素)： 即沿着Z轴平移，正值突脸，负值远离脸，需要开启视距(脸与屏幕的距离)

            第二类:   旋转

                rotateX(度数):  以X轴为轴心，进行旋转

                rotateY(度数):  以Y轴为轴心，进行旋转

                rotateZ(度数):  以Z轴为轴心，进行旋转

            第三类：  缩放  

                scaleX(倍数):   水平方向(即X轴方向)缩放

                scaleY(倍数):   垂直方向缩放

                scaleZ(倍数):   Z轴方向缩放

                scale(倍数)  相当于scaleX和scaleY的合并。