CSS3动画

开发工具与关键技术：DW与CSS3
作者：茅凯翔
撰写时间：2019年1月19日星期六

如果你想用CSS3来创建动画，可以学习一下@keyframes规则。
@keyframes可用于创建动画效果，@keyframes可以规定某项CSS样式，就能达到从当前样式逐渐改变为新样式，接下来我们来看看。
我们先用百分比来规定一下动画时间：


一定要从0%开始，因为0%是开始，100%是结束。Background-size是让图片适应我给高宽度，如果你是颜色就不用设置这个属性。

然后我们再给div设置样式，样式如下：

最后我们再设置动画属性，如下图：

1.animation-name为指定的动画名称，带有红线就是我们自己设置的动画名称。
2.animation-duration为动画持续时间。
3.animation-timing-function为动画的变化速度。
4.animation-delay为动画延迟多久才开始。
5.animation-iteration-count为动画的循环次数。

最后我们的效果图：



我也不晓得怎么弄视频上来，你们可以试一下，谢谢！