CSS3动画的实例讲解

大家好，今天给大家讲解一下CSS3动画的实例讲解。

首先我们写一个基本的div盒子并且给它一个宽、高和背景颜色。
然后在style样式表中写出接下来会用到的动画属性：
① ：给这个动画定义一个动画名称
② ：给这个动画定义它的持续时间
③ ：这个是给动画添加的一个延迟时间
④ ：规定这个动画的播放次数，这里可以给它一个确切的数字，也可以给它一个infinite代表它无限循环一直播放。
⑤ ：动画属性写完后，这里就开始写动画了
@keyframes是动画帧，后面是我们定义的动画名称，例子中是从0,0点边框角度为0过渡到500px,0边框角度为50%也就是圆形了。我们看一下它的效果

延迟2秒后从正方形过渡到X轴的800并变成圆形
我们也可以设置百分比的形式

从0开始没有移动也没有边框角度，50%时：到X轴300的位置时它的背景颜色由绿色变成棕色，再到最后效果完成移动到了X轴500的位置并由50%时的棕色重新变为绿色边框角度也变成50%成为了圆形。
我们再看一下它的效果