一、过渡（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的简单内容。
