个回答

• 枫叶咚咚咚

  2017-11-09 07:14:40

  要理解keyframes先看.cloudy{}中的代码animation: cloudy 5s ease-in-out infinite; 这里定义了一个动画，名称为cloudy，时长5秒，timing-function为ease-in-out，执行无限次。

  @keyframes表示关键帧，也就是动画执行到某个时刻，这一帧是什么样子。

  那么，这个云的例子中的关键帧

  @keyframes cloudy {
      50% {transform: translateY(-0.1rem); }
  }

  就表示，在动画进行到50%的时候，云进行-0.1rem的位移，这里的50%就是上面定义动画时的5s的50%，也就是2.5s。
  

  0

• 灿烂千阳well

  2017-02-19 08:25:00

  @keyframes定义一个动画,并定义具体的动画效果,比如是放大还是位移等等。 @keyfra... 百分比是指动画完成一遍的时间长度的的百分比 ,0%是动画的开始时间,50%是动画完成
  

  0