CSS中的animation-direction属性用于定义动画的方向。动画的方向应为向前,向后或交替循环。
用法:
animation-direction:normal|reverse|alternate|alternate-reverse| initial|inherit;
属性值:下面列出了animation-direction属性:
normal:此动画属性将动画向前播放。它是默认值。
- 用法:
animation-direction:normal;
- Example:
<!DOCTYPE html> <html> <head> <title> CSS | animation-direction Property </title> <style> body { text-align:center; } h1 { color:green; } h3 { width:100%; animation-name:text; animation-duration:2s; animation-iteration-count:infinite; } #one { animation-direction:normal; } @keyframes text { from { margin-left:60%; } to { margin-left:0%; } } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>animation-direction property</h2> <h3 id="one">This text is normal.</h3> </body> </html>
- Output:
reverse:此动画属性以相反的方向播放动画。
- 用法:
animation-direction:reverse;
- 例:
<!DOCTYPE html> <html> <head> <title> CSS | animation-direction Property </title> <style> body { text-align:center; } h1 { color:green; } h3 { width:100%; animation-name:text; animation-duration:2s; animation-iteration-count:infinite; } #one { animation-direction:reverse; } @keyframes text { from { margin-left:60%; } to { margin-left:0%; } } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>animation-direction property</h2> <h3 id="one">This text is reverse.</h3> </body> </html>
- 输出:
交替:此动画属性先播放动画,然后播放动画。
- 用法:
animation-direction:alternate;
- 例:
<!DOCTYPE html> <html> <head> <title> CSS | animation-direction Property </title> <style> body { text-align:center; } h1 { color:green; } h3 { width:100%; animation-name:text; animation-duration:2s; animation-iteration-count:infinite; } #one { animation-direction:alternate; } @keyframes text { from { margin-left:60%; } to { margin-left:0%; } } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>animation-direction property</h2> <h3 id="one">This text is alternate.</h3> </body> </html>
- 输出:
alternate-reverse:此动画属性首先向后播放动画,然后向前播放。
- 用法:
animation-direction:alternate-reverse;
- 例:
<!DOCTYPE html> <html> <head> <title> CSS | animation-direction Property </title> <style> body { text-align:center; } h1 { color:green; } h3 { width:100%; animation-name:text; animation-duration:2s; animation-iteration-count:infinite; } #one { animation-direction:alternate-reverse; } @keyframes text { from { margin-left:60%; } to { margin-left:0%; } } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>animation-direction property</h2> <h3 id="one">This text is alternate-reverse.</h3> </body> </html>
- 输出:
initial:此属性用于将animation属性设置为其默认值。
继承:此属性用于从其父元素继承animation属性。
支持的浏览器:下面列出了animation-direction属性支持的浏览器:
- 谷歌浏览器43.0
- Internet Explorer 10.0
- Firefox 16.0
- Opera 30.0
- Safari 9.0
相关用法
- HTML Style animationDirection用法及代码示例
- CSS transition-property用法及代码示例
- CSS nav-up用法及代码示例
- CSS nav-down用法及代码示例
- CSS all属性用法及代码示例
- CSS nav-right用法及代码示例
- CSS top属性用法及代码示例
- CSS right属性用法及代码示例
- CSS resize属性用法及代码示例
- CSS nav-index用法及代码示例
- CSS zoom属性用法及代码示例
- CSS columns属性用法及代码示例
- CSS clear属性用法及代码示例
- CSS overflow-y属性用法及代码示例
- CSS will-change用法及代码示例
注:本文由纯净天空筛选整理自vt_m大神的英文原创作品 CSS | animation-direction Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。