0% {transform:scale(0.5) rotate(0deg);}
12.5% {transform:scale(0.5) rotate(45deg);}
25% {transform:scale(0.5) rotate(90deg);}
37.5% {transform:scale(0.5) rotate(135deg);}
50% {transform:scale(0.5) rotate(180deg);}
62.5% {transform:scale(0.5) rotate(225deg);}
75% {transform:scale(0.5) rotate(270deg);}
87.5% {transform:scale(0.5) rotate(315deg);}
100% {transform:scale(0.5) rotate(360deg);}
}
三、思路
1. transform控制每个小方块在Y轴的偏移，rotate控制旋转的角度，scale缩放至原大小的一半；
2. opacity在每个小方块之间相差0.12左右，达到渐变效果；
3. 设置top与left偏移，控制圆心在中心处；
4. 为整个方块设置旋转动画rotateThis，定义8个时间点；
5. 设置动画的animation-timing-function为step-start，达到的效果是不让动画渐变；
