css如何添加动画效果 |纯css3实现圆角进度条

在CSS中，动画是通过@keyframes规则来定义的。@keyframes规则包含要进行动画的关键帧和动画效果，可以在任何样式表中使用。

@keyframes example {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: green;}
}

在上面的例子中，定义了一个名为example的关键帧。该规则在0%、50%和100%的位置设置了不同的背景颜色，大家可以使用以下CSS代码将其应用于HTML元素：

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

上面的代码可以将上面定义的example动画应用于一个div元素，并设置它的持续时间为4秒。

除了animation-name和animation-duration属性之外，CSS还提供了其他的动画属性，例如animation-delay、animation-iteration-count和animation-timing-function等等。这些属性可以设置动画的延迟时间、循环次数和时间函数等等。

总之，通过使用@keyframes规则和相关的动画属性，大家可以轻松地为HTML元素添加各种动画效果。