CSS Animation 详解

CSS Animation 允许元素平滑地从一个样式状态过渡到另一个样式状态。通过设置关键帧（keyframes），可以控制动画序列中的中间步骤。

一、核心概念

1.关键帧（Keyframes）

使用 @keyframes 规则定义动画序列
通过百分比或 from/to 指定动画阶段
每个阶段可以设置元素的样式属性

2.动画属性

animation-name: 指定关键帧名称
animation-duration: 动画持续时间（秒或毫秒）
animation-delay: 动画延迟开始时间
animation-iteration-count: 循环次数（数字或 infinite）
animation-direction: 动画方向（normal, reverse, alternate）
animation-timing-function: 速度曲线（ease, linear, ease-in-out）
animation-fill-mode: 动画前后的状态（forwards, backwards, both）
animation-play-state: 动画播放状态（running, paused）

3.示例代码

下面是一个包含多种动画效果的完整示例：

html

预览

html 复制代码

<!DOCTYPE html>
<html>
<head>
<style>
/* 基础样式 */
.container {
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
  margin: 20px auto;
  position: relative;
}

/* 1. 简单移动动画 */
.box {
  width: 50px;
  height: 50px;
  background: #3498db;
  position: absolute;
  top: 20px;
  
  /* 应用动画 */
  animation: move 3s infinite;
}

@keyframes move {
  0% { left: 20px; }
  50% { left: 430px; }
  100% { left: 20px; }
}

/* 2. 旋转+透明度变化 */
.circle {
  width: 40px;
  height: 40px;
  background: #e74c3c;
  border-radius: 50%;
  position: absolute;
  top: 100px;
  left: 20px;
  
  animation: rotateAndFade 4s infinite linear;
}

@keyframes rotateAndFade {
  0% { transform: rotate(0deg); opacity: 1; }
  50% { opacity: 0.3; }
  100% { transform: rotate(360deg); opacity: 1; }
}

/* 3. 弹跳动画 */
.ball {
  width: 30px;
  height: 30px;
  background: #2ecc71;
  border-radius: 50%;
  position: absolute;
  top: 180px;
  left: 20px;
  
  animation: bounce 1s infinite alternate ease-in;
}

@keyframes bounce {
  to {
    top: 220px;
    height: 25px;
  }
}

/* 4. 悬停触发动画 */
.button {
  position: absolute;
  top: 240px;
  left: 20px;
  padding: 10px 20px;
  background: #9b59b6;
  color: white;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  
  transition: all 0.3s;
}

.button:hover {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* 5. 复杂动画序列 */
.combo {
  width: 40px;
  height: 40px;
  background: #f39c12;
  position: absolute;
  top: 100px;
  left: 440px;
  
  animation: combo 6s infinite;
}

@keyframes combo {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-200px, 0) rotate(90deg); }
  50% { transform: translate(-200px, 100px) rotate(180deg); }
  75% { transform: translate(0, 100px) rotate(270deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

</style>
</head>
<body>

<div class="container">
  <div class="box"></div>
  <div class="circle"></div>
  <div class="ball"></div>
  <div class="button">Hover Me</div>
  <div class="combo"></div>
</div>

</body>
</html>

二、高级技巧

1.多动画组合

css

css 复制代码

.element {
  animation: 
    fadeIn 1s,
    slideUp 0.8s ease-out,
    pulse 3s 2s infinite;
}

动画事件监听（JavaScript）

javascript

javascript 复制代码

const element = document.querySelector('.box');

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

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

element.addEventListener('animationiteration', () => {
  console.log('动画循环一次');
});

使用 cubic-bezier 自定义速度曲线

css

css 复制代码

animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

三、浏览器兼容性

大多数现代浏览器都支持 CSS Animation，但建议添加前缀以确保兼容性：

css

css 复制代码

.element {
  -webkit-animation: fadeIn 1s; /* Safari 4+ */
  -moz-animation: fadeIn 1s; /* Firefox 5+ */
  -o-animation: fadeIn 1s; /* Opera 12+ */
  animation: fadeIn 1s; /* Chrome, IE 10+ */
}

CSS Animation 为网页添加了丰富的交互体验，合理使用可以增强用户体验而不会造成干扰。