CSS动画简述

CSS中的动画用法主要是通过使用关键帧动画(@keyframes)来定义动画的不同阶段及其样式。下面是一个例子:




  



在上面的例子中,我们首先使用关键帧动画定义了一个名为example的动画,其中0%表示动画的起始状态,50%表示动画的中间状态,100%表示动画的结束状态。在这个例子中,动画会从红色渐变到黄色再到蓝色。

然后,我们将这个动画应用到了一个div元素上,通过设置animation-name属性为example来指定要应用的动画,animation-duration属性来定义动画的持续时间,animation-iteration-count属性来定义动画的循环次数(在本例中为无限循环)。

最后,当页面加载时,我们会看到一个具有动画效果的正方形盒子从红色渐变到黄色再到蓝色,并且这个动画会一直循环播放。

你可能感兴趣的:(css,前端)