CSS3 动画基础单词语法

动画有兼容性的问题 -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 缩放 可以数字可以百分比

原文地址:https://www.cnblogs.com/ckxbk/p/12882314.html