css动画简易制作

CSS 动画基础语法

使用 @keyframes 定义动画关键帧，通过 animation 属性绑定到元素：

@keyframes 动画名称 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.element {
  animation: 动画名称 2s ease-in-out infinite;
}

关键属性说明

• animation-name: 指定 @keyframes 名称
• animation-duration: 动画持续时间（如 2s）
• animation-timing-function: 速度曲线（ease/linear/ease-in等）
• animation-delay: 延迟启动时间
• animation-iteration-count: 播放次数（数字或infinite）
• animation-direction: 播放方向（normal/alternate等）

常用动画效果示例

淡入效果

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

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

位移动画

@keyframes slide {
  0% { transform: translateX(-100px); }
  100% { transform: translateX(0); }
}

.slide-element {
  animation: slide 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

复合动画写法

简写属性按以下顺序排列：

.element {
  animation: name duration timing-function delay iteration-count direction;
}

浏览器兼容前缀

针对老旧浏览器可能需要添加前缀：

@-webkit-keyframes example {
  /* Chrome, Safari */
}
@-moz-keyframes example {
  /* Firefox */
}

动画暂停控制

通过JavaScript控制动画状态：

element.style.animationPlayState = 'paused'; // 或 'running'

性能优化建议

• 优先使用 transform 和 opacity 属性（不会触发重排）
• 避免频繁操作会引起布局变化的属性（如width/height）
• 对移动设备使用 will-change: transform; 提示浏览器优化