CSS3动画

css动画

css 实现动画主要有3种方式

第一种是： transition 实现渐变动画

第二种是： transform 转变动画

第三种是： animation 实现自定义动画
transition渐变动画
transition有三个属性:
property:填写需要变化的css属性
duration:完成过渡效果需要的时间单位(s或者ms)
timing-function:完成效果的速度曲线（linear(匀速),ease(从慢到快再到慢),ease-in(慢慢变快),ease-out(慢慢变慢),ease-in-out(先变快再到慢)）
delay: 动画效果的延迟触发时间(单位ms或者s)

transform转变动画
该属性允许我们能够对元素进行旋转、缩放、倾斜、移动这四类操作.一般是配合transition的属性一起使用。
none：定义不进行任何转换，一般用于注册掉该转换。
transform-functions：定义要进行转换的类型函数。主要有：
旋转(rotate) 缩放(scale)``倾斜(skew)``移动(translate)

animation自定义动画
animation 所有动画属性的简写属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。