2016-01-29

CSS animation-timing-function 属性中的 steps() 与 step-start,step-end

steps() 设置间隔参数,可以实现分步过渡

第一个参数指定了时间函数中的间隔数量(必须是正整数)
第二个参数可选,接受 startend 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end

steps() 的实现方法:

  1. .heart{
  2.     background-image: url('images/heart-sprite.png');
  3.     -webkit-animation: animate 1s steps(28) infinite;
  4.             animation: animate 1s steps(28) infinite;
  5. }
  6. .star{
  7.     background-image: url('images/star-sprite.png');
  8.     -webkit-animation: animate 1s steps(28) infinite;
  9.             animation: animate 1s steps(28) infinite;
  10. }
  11. @keyframes animate {
  12.     from {
  13.         background-position: 0 0;
  14.     }
  15.     to {
  16.         background-position: -2800px 0;
  17.     }
  18. }

step-start 可以实现与 steps() 效果相同的动画

step-start 等同于 steps(10,start) 动画分成10步,动画执行时为开始左侧端点的部分为开始。
step-end 等同于 steps(10,end) 动画分成10步,动画执行时以结尾端点为开始,默认值为 end

step-start 的实现方法:

  1. .heartTwo{
  2.     background-image: url('images/heart-sprite.png');
  3.     -webkit-animation: animateTwo 1s infinite step-start;
  4.             animation: animateTwo 1s infinite step-start;
  5. }
  6. .starTwo{
  7.     background-image: url('images/star-sprite.png');
  8.     -webkit-animation: animateTwo 1s infinite step-start;
  9.             animation: animateTwo 1s infinite step-start;
  10. }
  11. @keyframes animateTwo {
  12.     0%   {  background-position: 0 0; }
  13.     3.4% {  background-position: -100px 0; }
  14.     6.8% {  background-position: -200px 0; }
  15.     10.2%{  background-position: -300px 0; }
  16.     13.6%{  background-position: -400px 0; }
  17.     17%  {  background-position: -500px 0; }
  18.     20.4%{  background-position: -600px 0; }
  19.     23.8%{  background-position: -700px 0; }
  20.     27.2%{  background-position: -800px 0; }
  21.     30.6%{  background-position: -900px 0; }
  22.     34%  {  background-position: -1000px 0; }
  23.     37.4%{  background-position: -1100px 0; }
  24.     40.8%{  background-position: -1200px 0; }
  25.     44.2%{  background-position: -1300px 0; }
  26.     47.6%{  background-position: -1400px 0; }
  27.     51%  {  background-position: -1500px 0; }
  28.     54.4%{  background-position: -1600px 0; }
  29.     57.8%{  background-position: -1700px 0; }
  30.     61.2%{  background-position: -1800px 0; }
  31.     64.6%{  background-position: -1900px 0; }
  32.     68%  {  background-position: -2000px 0; }
  33.     71.4%{  background-position: -2100px 0; }
  34.     74.8%{  background-position: -2200px 0; }
  35.     78.2%{  background-position: -2300px 0; }
  36.     81.6%{  background-position: -2400px 0; }
  37.     85%  {  background-position: -2500px 0; }
  38.     88.4%{  background-position: -2600px 0; }
  39.     91.8%{  background-position: -2700px 0; }
  40.     95.2%{  background-position: -2800px 0; }
  41.     100% {  background-position: 0 0; }
  42. }

steps(1,start) 等同于 step-startsteps(1,end) 等同于 step-end

动画帧数在线生成:http://tid.tenpay.com/labs/css3_keyframes_calculator.html