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()
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);
}
}
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;
