如何为CSS容器添加动画效果？通过@keyframes和animation属性实现动态效果

@keyframes

animation

@keyframes

animation

@keyframes

animation

@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秒播放 */
}