@keyframes规则的问题

来源:5-1 圣诞树、月亮与云

蒙奇奇3

2017-02-02 09:26

请问这段代码云的动画中,@keyframes中的50%是什么意思?


写回答 关注

2回答

  • 枫叶咚咚咚
    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。

  • 灿烂千阳well
    2017-02-19 08:25:00

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

H5+JS+CSS3 实现圣诞情缘

为圣诞节准备的H5+JS+CSS特效案例教程,实现静与动的结合

122038 学习 · 211 问题

查看课程

相似问题