css制作动画代码

CSS 动画基础语法

CSS 动画通过 @keyframes 规则定义动画序列，再通过 animation 属性将动画应用到元素上。以下是一个简单的示例：

/* 定义动画序列 */
@keyframes example {
  0%   { background-color: red; }
  50%  { background-color: yellow; }
  100% { background-color: green; }
}

/* 应用动画到元素 */
.element {
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

常用动画属性

animation 是以下属性的简写：

• animation-name: 指定 @keyframes 动画名称
• animation-duration: 动画持续时间（如 2s）
• animation-timing-function: 动画速度曲线（如 ease, linear, ease-in-out）
• animation-delay: 动画开始前的延迟时间
• animation-iteration-count: 动画播放次数（infinite 表示无限循环）
• animation-direction: 动画播放方向（normal, reverse, alternate 等）
• animation-fill-mode: 动画结束后元素的样式状态

动画示例：旋转效果

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: rotate 2s linear infinite;
  width: 50px;
  height: 50px;
  background-color: blue;
}

动画示例：淡入淡出

@keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.fade-in {
  animation: fade 1.5s ease-in;
}

动画示例：弹跳效果

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

.bouncing-ball {
  animation: bounce 0.5s ease-in-out infinite;
}

动画性能优化

使用 transform 和 opacity 属性制作的动画性能最佳，因为现代浏览器可以硬件加速这些属性。避免使用 left, top, margin 等属性制作动画。

多动画组合

一个元素可以同时应用多个动画：

.element {
  animation: 
    fade 2s ease-in-out,
    bounce 1s ease-out infinite;
}

响应式动画

可以使用媒体查询根据屏幕尺寸调整动画：

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