css3自定义动画

css3动画

一、transform（转换动画、直接动画）

transform 有几个属性

1. rotate（旋转）----rotatex、rotatey、rotatez（默认）
2. translate（平移）—translatex（默认）、translatey、translatez
3. skew（变形）–skewx（默认）、skewy
4. scale（伸缩比例）cale两个参数时，分别是宽度和高度的比例，scale一个参数时，是等比例缩放

二、transition（过渡动画）

1. transition相关补充
2. transition-property过渡的属性
3. transition-delay延迟时间
4. transition-duration动画过渡时间
5. transition-timing-function过渡效果的时间曲线：linear（匀速）、ease（慢-快-慢）、ease-in（开始慢）、ease-out（结束慢）、ease-in-out（开始、结束慢）

三、animation（帧动画）

当在@keyframe创建动画，把它绑定到一个选择器
1.animation相关补充
animation-name规定 @keyframes 动画的名称 animation-duration执行动画所需时间。默认是0
animation-timing-function 规定动画的速度曲线 。默认是ease animation-delay
延迟时间。默认时0 animation-iteration-count 规定动画被播放的次数。默认是 1
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
：normal（正常）、reverse（动画反向播放）、alternate（奇数时正向播放，偶数时反向播放）、alternate-reverse（奇数时反向播放，偶数式正向播放）