Animation动画

Posted 2020-09-16

Animation动画

格式

<single-animation>: name duration [timing-function] [delay] [iteration-count] [direction] [play-state] [fill-mode];

animation:名称 执行时间 速度曲线 延迟时间 循环次数 是否反向 执行状态 动画对象动画时间之外的状态

解释

animation-name: 动画名称 none：不引用任何动画名称

animation-duration: 动画执行时间 (单位：s ms)

animation-delay: 动画效果延迟时间(单位：s ms)

animation-timing-function: 动画速度曲线,同 transition-timing-function linear ease （默认） ease-in ease-out ease-in-out cubic-bezier()

animation-iteration-count: 动画执行循环次数 infinite 无限次 | <number>（默认 1）

animation-direction: 动画是否反向运动 normal： （默认） 正常方向 reverse： 反方向运行 alternate： 动画先正后反方向运行 alternate-reverse： 先反后正方向运行

animation-play-state: 动画执行状态 running：运动（默认） paused：暂停

animation-fill-mode: 动画对象动画时间之外的状态 none：（默认值） 不设置对象动画之外的状态 【对象原始状态】>动画>【对象原始状态】 forwards： 设置对象状态【对象原始状态】为动画开始时的状态 backwards： 设置对象状态【对象原始状态】为动画结束时的状 both： 设置对象状态为 动画开始为开始 动画结束为结束 （忽略原始状态）

 

@keyframes: animationname { keyframes-selector { css-styles } } animationname animation的名称。

keyframes-selector 动画时间的百分比。 合法值： 0-100% from (和0%相同) to (和100%相同) 您可以用一个动画keyframes-selectors。

css-styles 一个或多个合法的CSS样式属性

例如：

animation：run 20s linear infinite；
@keyframes run { 
　　10%{width:500px,background:red;} 
　　20%{width:500px,background:red;}
 }

 

兼容性

IE10,Firefox、Opera支持@keyframes规则和animation属性

IE9及更早版本，不支持@keyframes规则和animation属性

animation:run 5s;
-moz-animation:runt 5s; /* Firefox */
-webkit-animation:runt 5s; /* Safari and Chrome */
-o-animation:runt 5s; /* Opera */

@keyframes run
@-moz-keyframes runt /* Firefox */
@-webkit-keyframes runt /* Safari and Chrome */
@-o-keyframes run /* Opera */