当前位置：首页 > CSS

动画制作css

2026-02-27 08:11:10CSS

CSS 动画制作方法

CSS 动画可以通过 @keyframes 规则和 animation 属性实现。以下是几种常见的制作方式：

基础动画定义

通过 @keyframes 定义动画的关键帧，从起始状态到结束状态：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.element {
  animation: fadeIn 2s ease-in-out;
}

多关键帧动画

定义多个关键帧以实现复杂动画效果：

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}
.element {
  animation: bounce 1s infinite;
}

动画属性控制

通过 animation 的子属性精细控制动画行为：

动画制作css

.element {
  animation-name: slide;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

使用 CSS 变量动态调整

结合 CSS 变量实现动态动画参数：

:root {
  --anim-duration: 2s;
}
.element {
  animation: spin var(--anim-duration) linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

硬件加速优化

通过 transform 和 opacity 触发 GPU 加速：

动画制作css

@keyframes slide {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}
.element {
  will-change: transform;
  animation: slide 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

复合动画示例

组合多个动画效果：

@keyframes colorChange {
  0% { background: #ff0000; }
  50% { background: #00ff00; }
  100% { background: #0000ff; }
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.element {
  animation: 
    colorChange 4s infinite,
    pulse 2s infinite;
}

响应式动画

通过媒体查询适配不同设备：

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

动画事件监听

通过 JavaScript 监听动画事件：

const element = document.querySelector('.element');
element.addEventListener('animationstart', () => {
  console.log('Animation started');
});
element.addEventListener('animationend', () => {
  console.log('Animation completed');
});