要理解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。

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