首先定义@keyframes规则设置动画关键帧，再通过animation属性控制动画的持续时间、循环次数等，实现CSS容器动画效果。
通过
@keyframes定义动画的关键帧，然后使用
animation属性将动画应用到CSS容器上，可以实现容器的动画效果。
解决方案
要为CSS容器添加动画效果，需要理解两个核心概念：
@keyframes和
animation属性。
@keyframes定义动画的步骤，就像电影的关键帧，而
animation属性则控制动画如何应用到元素上，比如持续时间、循环次数等。
如何创建基本的CSS动画？
首先，你需要定义一个
@keyframes规则。例如，让一个容器从透明变为不透明：
立即学习“前端免费学习笔记（深入）”；
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}然后，将这个动画应用到你的容器上：
.container {
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: forwards; /* 保持动画结束时的状态 */
}animation-name指定了要使用的
@keyframes规则，
animation-duration设置动画的持续时间。
animation-fill-mode: forwards是一个小技巧，可以确保动画结束后，元素保持动画的最终状态，而不是跳回初始状态。
如何实现更复杂的动画效果？
除了简单的淡入淡出，还可以使用
@keyframes创建更复杂的动画。例如，让容器旋转并改变颜色：
@keyframes rotateAndChangeColor {
0% {
transform: rotate(0deg);
background-color: red;
}
50% {
transform: rotate(180deg);
background-color: blue;
}
100% {
transform: rotate(360deg);
background-color: green;
}
}
.container {
animation-name: rotateAndChangeColor;
animation-duration: 3s;
animation-iteration-count: infinite; /* 无限循环 */
animation-timing-function: linear; /* 匀速动画 */
}这个例子中，
transform: rotate()用于旋转容器，
background-color用于改变背景颜色。
animation-iteration-count: infinite让动画无限循环，
animation-timing-function: linear则让动画以匀速进行。
如何控制动画的播放方向和延迟？
animation-direction属性可以控制动画的播放方向。例如，设置为
alternate可以让动画在每次循环时反向播放：
.container {
animation-name: slideIn;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}animation-delay属性可以设置动画的延迟播放时间：
.container {
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: 0.5s; /* 延迟0.5秒播放 */
}这在创建一系列动画时非常有用，可以错开它们的播放时间，创造更丰富的视觉效果。
