transition：过渡，从a点到b点，就像过江坐渡轮，是有时间的，是连续的，一般针对常规CSS属性
transform：变换，属性有旋转、缩放、偏移等，配合transition变换会很平滑
animation：自成一派

1、transition 过渡

transition-property: 变化的项目，比如width\height等
transition-duration: 变化所需的时长
transition-delay: 延迟变换的时间
transition-time-function: 变换的缓动曲线 linear 匀速\ ease-in 先快后慢\ ease-out 先慢后快\ ease-in-out 先慢中间快后慢\ step() \ cubic-bezier()

transition-time-function

2、transform 变换

类似于photoshop 的 Ctrl+t 自由变换

transform:rotate(x,y,z)    相对中心原点旋转，正值顺时针，负值逆时针
transform:translate(x,y,z)    位移，类似position:relactive，但永远是相对于自身位移
transform:scale(x,y)    缩放
transform:skew(x,y)    变形，扭曲

transform-origin   定义变形的原点，取值类似background-position

2.1、transform:rotate(x,y,z) 旋转

此时 perspective:600px

2.2、transform:scale(x,y) 缩放

0.01 < 值 < 0.99，使元素缩小
值 = 1，默认值，保持原有大小
值 >= 1，让元素放大
值 = 0，元素看不见
值为负数时，元素镜像翻转并缩放；

transform:scale()

2.3、transform:skew() 扭曲

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

一个参数：表示水平方向的倾斜角度；
两个参数：第一个表示水平方向的倾斜角度，第二个表示垂直方向的倾斜角度。

transfrom:skew()

transform小练习

2.4、transform-origin 定义变形的原点位置

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示：

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。
我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
取值类似background-position

2.4、perspective 透视视距

perspective属性有两种书写形式

用在舞台元素上（动画元素们的共同父辈元素）
用在当前动画元素上，与transform的其他属性写在一起。

如下代码示例：

//第一种
.stage {
    perspective: 600px;
}
//第二种
#stage .box {
    transform: perspective(600px) rotateY(45deg);
}

perspective 的两种写法产生的不同表现形式

perspective-origin 定义舞台或元素的中心

perspective-origin: 25% 75%;

2.5、transform-style:perserve-3d

基本上，我们想要根据现实经验实现一些3D效果的时候，transform-style: preserve-3d是少不了的。一般而言，该声明应用在3D变换的兄弟元素们的父元素上，也就是舞台元素。

3、animations

animation-name: rotate;
animation-duration: 5s;    //动画执行时间
animation-timing-function: linear;    
animation-delay: 2s ;    //动画延迟时间，负数为设置时间前的动画被截断
animation-iteration-count: infinite;    //动画执行次数，infinite无限循环
animation-direction: normal;    //动画反向播放
animation-fill-mode: forwards;    //动画保持开始或者结束时的样式）
animation-play-state: running;   //动画暂停(paused)或运行(running)

@keyframes glow{
    0% {
        padding: 0;
    }
    50% {
        padding: 0 20px;
        background-color:rgba(190, 206, 235, 0.2);        
    }
    100% {
        padding: 0 100px;
        background-color:rgba(190, 206, 235, 0.9);
    } 
}

animate.css 库
 库的使用介绍

3.1、animation-delay

负数：设置时间前的动画将被截断,比如设置为-2s，表现为动画从已经执行了2s的位置开始继续
正数：延迟n秒开始播放

3.2、animation-direction 动画反向播放

normal：默认值，不进行反方向播放
reverse：全部播放都是用反方向播放
alternate：在奇数次数（1、3、5）的时候正向播放，偶数次数（2、4、6）进行反向播放
alternate-reverse：在偶数次数（1、3、5）的时候正向播放，奇数次数（2、4、6）进行反向播放

3.3、animation-fill-mode 动画保持开始或者结束时的样式

forwards：动画结束后保持结束时的样式
backwards：动画结束后保持开始时的样式
both：两者皆有

简写格式

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation: 动画名字 播放时间 缓动速度 延迟时间 循环次数 是否反向 结束停在哪个画面 是否暂停

animation: rotate 5s linear 2s infinite alternate-reverse forwards running;

4、backface-visibility: hidden

CSS动画（transition\transiform\animation）