2021-05-26

                                CSS3动画

在CSS3中，我们能通过animation创建动画，在许多网页中能够取代动画图片以及JavaScript。动画中还有一个叫transition的属性，虽然它也可以实现从一种状态到另外一种状态的动画效果，但它只能控制开始和结束两个点，功能非常有限。想要实现更多的动画效果，关键帧（@keyframes）和animation的二者结合使用，则可以办到。

CSS3动画是什么？它是一种从样式逐渐变化为另外一种样式的效果，可以改变任意多的样式和任意多的次数，时间可用百分比来表示，关键词“from”和“to”，等同于0%和100%，0%是动画的开始，100%是动画的结束，但是为了得到最佳的浏览器支持，用百分比来表示较好。

如需在CSS3中创建动画，则需要了解@keyframes规则，当然animation属性也是需要了解的，此规则用于创建动画，在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

在@keyframes中创建动画时，必须得把它捆绑到某个选择器，否则不会产生动画效果，CSS3动画中规定至少两项动画属性，这样动画才可绑定到选择器上，即动画的名称、动画的时长，如果动画要无限播放，则使用infinite属性。

@keyframes规则和动画属性

 

基本写法，改变图片背景色，infinite可使动画无限播放，或许可以设置一个无限闪闪发亮的网页

 

同时animation也是一个复合属性

 

这只是其中一个小小的例子，关键帧能完成的动画效果也是数不胜数的

在忽略JavaScript时，CSS动画也成了网页动画功能的不二选择，当然，JavaScript也是能够完成动画的，有的疑问，就是两者都能完成动画，有一不就行了吗？每种事物的存在都有着一定的意义。