CSS动画-Animation讲解

CSS动画（Animation）是CSS3中一个强大的特性，允许您创建复杂的动画效果而无需使用JavaScript或Flash。动画( animation)是CSS3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制的效果。

一、基本概念

CSS动画由两部分组成：

@keyframes规则 - 定义动画序列

animation属性 - 将动画应用到元素并控制其行为

二、@keyframes 规则

@keyframes 用于定义动画在不同阶段的样式变化。

语法：

@keyframes animation-name {
  from {
    /* 起始状态 */
  }
  to {
    /* 结束状态 */
  }
}

/* 或使用百分比 */
@keyframes animation-name {
  0% {
    /* 起始状态 */
  }
  50% {
    /* 中间状态 */
  }
  100% {
    /* 结束状态 */
  }
}

示例：

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

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

三、Animation 属性

1. animation-name

指定要使用的@keyframes动画名称。

.element {
  animation-name: slideIn;
}

2. animation-duration

定义动画完成一个周期所需的时间。

.element {
  animation-duration: 2s; /* 2秒 */
  animation-duration: 500ms; /* 500毫秒 */
}

3. animation-timing-function

设置动画的速度曲线，控制动画的加速/减速方式。

.element {
  /* 预定义值 */
  animation-timing-function: ease; /* 默认，慢-快-慢 */
  animation-timing-function: linear; /* 匀速 */
  animation-timing-function: ease-in; /* 慢开始 */
  animation-timing-function: ease-out; /* 慢结束 */
  animation-timing-function: ease-in-out; /* 慢开始和结束 */
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* 自定义贝塞尔曲线 */
  
  /* 步骤函数 */
  animation-timing-function: steps(4, jump-start);
  animation-timing-function: step-start; /* 等同于 steps(1, jump-start) */
  animation-timing-function: step-end; /* 等同于 steps(1, jump-end) */
}

4. animation-delay

定义动画开始前的延迟时间。

.element {
  animation-delay: 1s; /* 延迟1秒开始 */
  animation-delay: -500ms; /* 立即开始，但跳过前500ms的动画 */
}

5. animation-iteration-count

设置动画重复播放的次数。

.element {
  animation-iteration-count: 1; /* 默认，播放一次 */
  animation-iteration-count: 3; /* 播放三次 */
  animation-iteration-count: infinite; /* 无限循环 */
  animation-iteration-count: 2.5; /* 播放两次半 */
}

6. animation-direction

定义动画播放的方向。

.element {
  animation-direction: normal; /* 默认，正向播放 */
  animation-direction: reverse; /* 反向播放 */
  animation-direction: alternate; /* 奇数次正向，偶数次反向 */
  animation-direction: alternate-reverse; /* 奇数次反向，偶数次正向 */
}

7. animation-fill-mode

定义动画在执行前后如何将样式应用于元素。

.element {
  animation-fill-mode: none; /* 默认，动画前后不应用任何样式 */
  animation-fill-mode: forwards; /* 动画结束后保持最后一帧的样式 */
  animation-fill-mode: backwards; /* 动画开始前应用第一帧的样式（考虑delay） */
  animation-fill-mode: both; /* 同时应用forwards和backwards */
}

8. animation-play-state

控制动画的播放状态。

.element {
  animation-play-state: running; /* 默认，动画运行 */
  animation-play-state: paused; /* 动画暂停 */
}

/* 通常与交互结合 */
.element:hover {
  animation-play-state: paused;
}

四、简写属性

animation 简写

将所有动画属性合并为一个属性。

语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

示例：

.element {
  /* 完整写法 */
  animation: slideIn 2s ease-in-out 1s infinite alternate both;
  
  /* 简写（仅必要属性） */
  animation: slideIn 2s;
  
  /* 多个动画 */
  animation: 
    slideIn 2s ease-out,
    fadeIn 1.5s ease-in 0.5s;
}

五、实践示例

示例1：基本淡入效果

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

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

示例2：弹跳球效果

@keyframes bounce {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-100px);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
}

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  animation: bounce 1.5s infinite;
}

示例3：加载旋转器

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

示例4：打字机效果

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  0%, 100% { border-color: transparent; }
  50% { border-color: black; }
}

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid;
  animation: 
    typing 3.5s steps(40, end),
    blink 0.75s step-end infinite;
}

六、性能优化建议

1：优先使用 transform 和 opacity

这些属性可以由GPU加速，不会触发重排

/* 好 - GPU加速 */
transform: translateX(100px);
opacity: 0.5;

/* 不好 - 可能触发重排 */
left: 100px;
width: 200px;

2：使用 will-change 属性

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

3：减少动画数量：避免同时过多元素动画

4：使用合适的 timing-function

考虑使用 cubic-bezier() 创建更自然的动画

七、浏览器兼容性

CSS动画在现代浏览器中得到广泛支持：

Chrome 43+ (完全支持)

Firefox 16+ (完全支持)

Safari 9+ (完全支持)

Edge 12+ (完全支持)

Opera 30+ (完全支持)

对于旧版浏览器，可能需要添加前缀：

@-webkit-keyframes fadeIn { /* WebKit/Blink */ }
@-moz-keyframes fadeIn { /* Firefox */ }
@-o-keyframes fadeIn { /* Opera */ }
@keyframes fadeIn { /* 标准 */ }

.element {
  -webkit-animation: fadeIn 2s;
  -moz-animation: fadeIn 2s;
  -o-animation: fadeIn 2s;
  animation: fadeIn 2s;
}

八、与 Transition 的区别

九、实用技巧

1. 暂停并恢复动画

.animated {
  animation: pulse 2s infinite;
}

.animated.paused {
  animation-play-state: paused;
}

2. 检测动画结束

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

3. 创建进度条

@keyframes progress {
  from { width: 0%; }
  to { width: 100%; }
}

.progress-bar {
  animation: progress 5s linear forwards;
}

总结

CSS动画提供了一种强大而灵活的方式来创建引人注目的视觉效果。通过合理使用@keyframes和各种动画属性，您可以创建从简单到复杂的各种动画效果，而无需编写JavaScript代码。记住要关注性能优化，特别是在移动设备上，并确保动画增强用户体验而不是分散注意力。