简单的CSS动画

               简单的CSS动画

（作者：郭海明，撰写时间：2019年1月17日）

如果我们想让一个长方块沿水平方向移动，并且方块是翻滚状态下移动，
这个时候我们就可以通过一个简单的CSS3方法来实现这个动作，
先在HTML里面设置一个类 类里面再包含一个div
然后给类设置属性
这样就可以得到一个长方块

然后就可以通过CSS的 @keyframes 添加一个动画名字并给名字添加关键帧，通过关键帧来控制长方块的每一步动画。，

如下图：

我们可以通过如图一起设置每个百分比translate(x,y)的x轴和Y轴的移动距离，让长方块达到移动的效果，
或translateX和translateY一起来设置移动效果，效果相同；
同时想让长方块在移动的时候附有翻滚的效果；就可以在transform里面加一个
rotate()并在每个百分比里面加入要翻滚的度数，并在度数后面加入度数单位(deg)
设置完这些之后

还要给它添加一个动画animation， 把上面自命名的关键帧名字donghua加到这里
并给动画设置一个时长（3s），播放方式(ease)， 无限播放(infinite)


这样就可以达到移动的同时，长方块跟着翻滚的效果了;