当前位置：首页 > CSS

css 动画制作

2026-01-28 03:37:51CSS

CSS 动画基础

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

定义一个简单的动画：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 2s ease-in-out;
}

常用动画属性

animation 是以下属性的简写：

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

复杂关键帧动画

可以在 @keyframes 中定义多个关键帧：

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

性能优化技巧

使用 transform 和 opacity 属性制作动画性能最佳，因为这两个属性不会触发重排（reflow）。避免使用 left, top, margin 等属性制作动画。

硬件加速技巧：

.element {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

动画事件监听

JavaScript 可以监听 CSS 动画事件：

const element = document.querySelector('.element');
element.addEventListener('animationstart', () => {
  console.log('动画开始');
});
element.addEventListener('animationend', () => {
  console.log('动画结束');
});

实用动画示例

弹跳效果：

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

.bounce {
  animation: bounce 0.5s ease infinite;
}

旋转加载动画：

css 动画制作

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

.loader {
  animation: spin 1s linear infinite;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  width: 40px;
  height: 40px;
}