css制作动画

CSS 动画基础

CSS 动画通过 @keyframes 规则和 animation 属性实现。@keyframes 定义动画的关键帧，animation 控制动画的播放方式。

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  animation: example 3s ease-in-out infinite;
}

关键帧定义

@keyframes 规则允许指定动画序列中特定时间点的样式。可以使用百分比或 from/to 关键字。

@keyframes slidein {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

动画属性

animation 是以下属性的简写：

• animation-name: 指定 @keyframes 名称。
• animation-duration: 动画持续时间（如 2s）。
• animation-timing-function: 速度曲线（如 ease, linear）。
• animation-delay: 动画开始前的延迟。
• animation-iteration-count: 播放次数（如 infinite）。
• animation-direction: 播放方向（如 alternate）。
• animation-fill-mode: 动画结束后的样式保留方式。

div {
  animation: slidein 2s ease-out 1s infinite alternate;
}

过渡效果

CSS 过渡（transition）用于在状态变化时平滑过渡，适合简单交互效果。

button {
  background: blue;
  transition: background 0.5s ease;
}
button:hover {
  background: green;
}

性能优化

优先使用 transform 和 opacity 属性，它们可通过 GPU 加速。避免频繁触发重排（如修改 width）。

.box {
  transform: translateZ(0); /* 触发硬件加速 */
}

示例：弹跳动画

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.ball {
  animation: bounce 0.5s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}

响应式动画

结合媒体查询调整动画参数：

@media (max-width: 600px) {
  .box {
    animation-duration: 1s;
  }
}