当前位置：首页 > CSS

css动画制作步骤

2026-01-28 12:32:08CSS

CSS动画制作步骤

关键帧定义 使用@keyframes规则定义动画序列，指定动画在不同时间点的样式状态。例如：

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

动画属性绑定 通过animation属性将关键帧动画绑定到目标元素，需设置以下子属性：

.element {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

复合简写语法 上述属性可简写为：

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

变换动画实现 结合transform属性实现位移/旋转/缩放等效果：

@keyframes slideAndRotate {
  50% { transform: translateX(100px) rotate(180deg); }
  100% { transform: translateX(0) rotate(360deg); }
}

性能优化建议 优先使用opacity和transform属性触发GPU加速，避免频繁重排。可通过will-change属性预声明：

.element {
  will-change: transform, opacity;
}

事件监听控制 使用JavaScript监听动画事件：

css动画制作步骤

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