一、变形transform
1.浏览器支持
Internet Explorer 9 需要前缀 -ms-。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 需要前缀 -o-。
2.平移 translate
X轴，Y轴 px
transform:translate(100px,-100px);
3.拉伸 skew
X轴， Y轴 deg
transform:skew(100deg,0deg);
4.缩放 scale
宽 高
transform:scale(1.1,0.5);
5.旋转 rotate
正数顺时针 deg
transform:rotate(720deg);
6.注意：
转换没有脱离文档流，保留原位置
二、过渡 transition
1.浏览器兼容性
2.平滑过渡效果
3.
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3
transition:属性名字 过渡时间 曲线速度 延迟时间
4.注意：1.display:none消失
2.z-index 改变层级 没有过渡效果
三、动画 animation
1.浏览器兼容性
2.使用动画的步骤：
1.定义动画帧：
@keyframes 自定义名称{
from{}
50%{}
to{}
}
选择器{
-webkit-animation:名称 动画时间 曲线速度 延迟时间 播放次数 逆向播放 播放状态 定格位置
}
3.
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
linear 线性速度
ease 开始慢 中间快 结束慢
ease-in 开始慢
ease-out 结束慢
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
infinite 无限循环
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
alternate 逆向播放
normal 正常播放
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
paused 暂定
running 运行
animation-fill-mode 动画定位位置
forwards:定格在结束位置
backwards:定格在起始位置
both:两者兼容