CSS3动画 ☞ animation-time-function ☞ step属性
动画属性
- animation-name: 给动画起的名字,在定义动画帧@keyframes时用
- animation-duration:动画执行时间
- animation-timing-function:动画帧执行函数,可以指定两个帧之间的过渡方式
linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit
- animation-delay:延迟动画执行时间
- animation-iteration-count:动画执行次数,infinite:无限次
- animation-direction:执行方向
- animation-fill-mode:none|forwards|backwards|both|initial|inherit
- animation-play-state:指定动画状态,paused | running | initial | inherit
概念(step(n, start/end))
w3schools上的介绍:
The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value “start” or “end”, and specifies the point at which the change of values occur within the interval.自己的理解(还不是完全理解o(╯□╰)o):指定执行的帧的数量,大概意思就是有两个帧,将这两个帧之间的间隔平均分成n段去执行,start/end指定是跳跃到帧的开始还是帧的结尾,且这个step属性只针对每两个帧之间,而不是动画全过程。
demo
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Document</title> <style> .bird { min-width: 91px; min-height: 91px; position: absolute; left: 20px; Top: 50px; background: #fee url(images/step-anim/steps-test.png); } .birdFly { -moz-animation: bird-slow 2000ms steps(3, start) infinite; -webkit-animation: bird-slow 2000ms steps(3, start) infinite; } @keyframes bird-slow { 0% {background-position-x: -0px;} // 分割成三帧执行 step(3, start) 100% {background-position-x: -273px;} } </style> </head> <body> 使用step属性实现帧动画 <div class="bird birdFly"></div> </body> </html>
没啥内容,做个小记录,小笔记,嘿嘿- - !不知道咋让运行结果的动画搞成图片弄上来,不知道有没有能在线编辑demo同时出效果的网站^_^!