语法 @keyframes animationname {keyframes-selector {css-styles;}}css
值 | 描述 |
---|---|
animationname | 必需。定义动画的名称。 |
keyframes-selector | 必需。动画时长的百分比。合法的值:0-100%; from(与 0% 相同); to(与 100% 相同) |
css-styles | 必需。一个或多个合法的 CSS 样式属性。 |
语法 animation: name duration timing-function delay iteration-count direction;
默认值: none 0 ease 0 1 normal
继承性: no
版本: CSS3
JavaScript 语法: object.style.animation="mymove 5s infinite"html
值 | 描述 |
---|---|
animation-name | 规定须要绑定到选择器的 keyframe 名称。 |
animation-duration | 规定完成动画所花费的时间,以秒或毫秒计。(必须赋值) |
animation-timing-function | 规定动画的速度曲线。 |
animation-delay | 规定在动画开始以前的延迟。 |
animation-iteration-count | 规定动画应该播放的次数。 |
animation-direction | 规定是否应该轮流反向播放动画。 |
animation-timing-function:类型动画
值 | 描述 |
---|---|
linear | 动画从头至尾的速度是相同的 |
ease | 默认。动画以低速开始,而后加快,在结束前变慢 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束。 |
ease-in-out | 动画以低速开始和结束。 |
infinite | 一直跑动画 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> @keyframes testname { from {transform: scale(0);} to {transform: scale(1);} } .test{ animation: testname 1.5s infinite; background-color: aquamarine; width: 20px; height:20px; border-radius: 50%; } </style> </head> <body> <div class="test"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> @keyframes testname { from {transform: scale(1);} 75% {transform: scale(0);} } .test{ animation: testname 1.5s infinite; background-color: aquamarine; width: 20px; height:20px; border-radius: 50%; float: left; margin-left: 10px; } .two{ animation-delay: 0.25s; } .three{ animation-delay: 0.5s; } </style> </head> <body> <div class="test"></div> <div class="test two"></div> <div class="test three"></div> </body> </html>
效果图:
3d
注意点:
code