动画有兼容性的问题 -webkit- -o- -moz-
动画的复合属性:动画名称 动画时间 动画方式 动画延迟 动画次数 动画方向
animation:a 2s linear 1s infinite alterna;
animation-name 检索或设置对象应用的动画
keyframes name 绑定到选择器的关键帧的名称 none 没有动画
@keyframes a {
第一种
form {}
to{}
第二种 百分比模式
0%{}
100%{}
}
animation-duration 检索或设置动画的持续时间 语法:time 指动画播放完成花费的时间默认值为0意味着没有动画
animation-delay 表示动画在什么时候凯 在等待的时候是在动画之外 可以为负值 但是负值会使动画立刻开始 直接跳进动画
animation-iteration-count 检索设置动画的循环次数 语法 infinte 无线循环 默认值为1 代表循环一次
animation-fill-mode:规定动画不播放时(当动画完成时或动画有延迟开始播放时),用到的元素
none默认值 不设置动画之外的状态 forwards 设置对象状态为动画结束的状态form backwards 设置对象状态为动画开始的状态to both 设置动画结束或开始的状态
animation-play-stae 指定动画是否开始或者暂停 paused 暂停动画 running 开始动画 animation 复合属性
animation-function 过度效果以什么效果开始到结束
ease 规定慢慢开始 然后变快 最后慢速结束的过度效果
ease-in 规定以慢速开始的过度效果
ease-out 规定以慢速结束的效果
ease-in-out 规定慢开始到慢结束的过度效果
animation-direction 是否循环交替反向播放
normal 默认值 动画正常播放
reverse 动画反向播放
alternate 动画正向播放在反向播放回来
alternate-reverse 动画反向播放正向回来
thming-function:steps()阶跃函数
zoom 缩放 可以数字可以百分比