当前位置：首页 > CSS

CSS动画制作代码

2026-03-12 07:58:53CSS

CSS动画基础语法

CSS动画通过@keyframes规则定义动画序列，结合animation属性实现动态效果。以下是一个基础模板：

@keyframes animation-name {
  0% { /* 初始状态 */ }
  50% { /* 中间状态 */ }
  100% { /* 结束状态 */ }
}

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

关键帧定义

关键帧使用百分比或from/to关键字描述动画阶段。示例实现元素淡入效果：

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

.box {
  animation: fadeIn 1.5s;
}

动画属性详解

完整动画属性可拆分为多个子属性：

CSS动画制作代码

.element {
  animation-name: slide;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
  animation-delay: 1s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

实用动画示例

弹性缩放效果：

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

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

无限旋转动画：

CSS动画制作代码

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

.loader {
  animation: spin 2s linear infinite;
}

多动画组合

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

@keyframes move {
  0% { left: 0; }
  100% { left: 200px; }
}

.ball {
  animation: 
    fadeIn 1s ease-out,
    move 2s ease-in-out infinite alternate;
}

性能优化建议

优先使用transform和opacity属性，避免触发重排：

@keyframes smoothMove {
  to {
    transform: translateX(100px) rotate(180deg);
    opacity: 0.5;
  }
}

响应式动画控制

通过JavaScript动态控制动画：

const element = document.querySelector('.animated');
element.style.animationPlayState = 'paused'; // 暂停动画

// 点击继续播放
element.addEventListener('click', () => {
  element.style.animationPlayState = 'running';
});