CSS 动画（Animations）技术教程与案例讲解
介绍
CSS 动画使元素从一种样式逐渐变化到另一种样式。通过CSS动画，我们可以使网页更加生动和有趣。
语法
要在CSS中创建动画，你需要定义关键帧（@keyframes）规则，然后为动画属性指定这些关键帧。以下是一个基本的语法结构：
@keyframes animationName {
from {background-color: red;}
to {background-color: yellow;}
}
element {
animation-name: animationName;
animation-duration: 4s;
}
案例讲解
示例：颜色变换动画
@keyframes colorChange {
0% {background-color: #3498db;}
50% {background-color: #e74c3c;}
100% {background-color: #2ecc71;}
}
.animated-box {
animation-name: colorChange;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
在这个示例中，我们创建了一个名为 `colorChange` 的关键帧动画，它使 `.demo-box` 的背景颜色在蓝色、红色和绿色之间变化。动画持续时间为4秒，使用 ease-in-out 的过渡效果，并无限次循环。
总结
CSS 动画是一个强大的工具，可以使网页元素生动起来。通过理解关键帧和动画属性的语法，你可以创建各种有趣的动画效果。
document.querySelector(‘.demo-box’).style.animation = ‘colorChange 4s ease-in-out infinite’;
