Css中animation动画
开发工具与关键技术：前端
作者：黄志鹏
撰写时间：2019/1/19
在前端css3中提供了很强大的animation动画，它可以指定多个关键帧，从而允许定义更加丰富的自定义动画
下面我们来用纯css做一个模仿音乐播放的动画，首先我们先布局，一个div里放10个span标签，整体布局就是这样了
代码如下
然后再把还没有动画样式的样式写出来，也就是设置每一个span标签的样式，我们主要设置其宽和边框即可
代码如下
接下来我们写一个关键帧，里面分5个过程，其实0%到100%你随意分，这里分5个就好，
在每一个过程中只是改变其高和背景颜色就好，但要注意的是每一个span标签改变高度后，
其在原来的位置会发生改变，所以我们在改变高和背景颜色的同时也改变其边距，让其保持在原位置。
代码如下
然后10个span标签调用同一个关键帧就可以了，不过想要每一个span标签的动画效果不同，我们只需改变每一个span标签调用关键帧的时间就行了。
代码如下
下面是浏览器输出结果