CSS3动画 - 创建关键帧动画效果

最后编辑于2025-04-14 12:13:30.7834163 +0800 CST

CSS3 动画

CSS3动画允许你创建元素从一种样式逐渐变化为另一种样式的效果，而无需使用JavaScript或Flash。通过CSS3动画，你可以定义动画的多个中间状态，并控制其播放方式。

浏览器支持

下表显示了主要浏览器对CSS3动画的支持情况：

属性 Chrome IE Firefox Safari Opera
@keyframes
animation		 43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-

CSS3 @keyframes规则

要创建CSS3动画，你必须首先使用@keyframes规则定义动画的关键帧。

关键帧描述了动画在特定时间点上的样式。

css 
1@keyframes animationName {
2    from { /* 开始状态 */ }
3    to { /* 结束状态 */ }
4}

或者使用百分比来定义更多中间状态：

css 
1@keyframes animationName {
2    0% { /* 开始状态 */ }
3    25% { /* 25%时的状态 */ }
4    50% { /* 50%时的状态 */ }
5    100% { /* 结束状态 */ }
6}

为了兼容不同浏览器，你可能需要添加前缀：

css 
1/* Chrome, Safari, Opera */
2@-webkit-keyframes animationName {
3    /* keyframes */
4}
5
6/* 标准语法 */
7@keyframes animationName {
8    /* keyframes */
9}

CSS3 animation属性

定义好关键帧后，你需要使用animation属性将动画绑定到元素上。

animation是一个简写属性，包含以下子属性：

  • animation-name - 指定要绑定到选择器的@keyframes动画的名称
  • animation-duration - 指定完成动画所需的时间
  • animation-timing-function - 指定动画的速度曲线
  • animation-delay - 指定动画开始的延迟时间
  • animation-iteration-count - 指定动画应该播放的次数
  • animation-direction - 指定动画是否应该轮流反向播放
  • animation-fill-mode - 指定动画结束时元素的样式
  • animation-play-state - 指定动画是运行还是暂停

animation-name

animation-name属性指定要绑定到元素的@keyframes动画的名称。

css 
1div {
2    animation-name: example;
3}

可以指定多个动画名称，用逗号分隔：

css 
1div {
2    animation-name: slide, fade;
3}

animation-duration

animation-duration属性指定完成一个动画周期所需的时间，以秒(s)或毫秒(ms)为单位。

css 
1div {
2    animation-name: example;
3    animation-duration: 5s;
4}

可以为多个动画指定不同的持续时间：

css 
1div {
2    animation-name: slide, fade;
3    animation-duration: 2s, 4s;
4}

animation-timing-function

animation-timing-function属性指定动画的速度曲线，控制动画中间过程的速度变化。

css 
1div {
2    animation-timing-function: ease;
3}

常用的速度曲线包括：

  • linear - 匀速动画
  • ease - 开始慢，然后快，然后慢结束（默认）
  • ease-in - 开始慢
  • ease-out - 结束慢
  • ease-in-out - 开始和结束都慢
  • cubic-bezier(n,n,n,n) - 自定义贝塞尔曲线
  • steps(n, start|end) - 分步显示动画
css 
1div {
2    animation-timing-function: steps(10, end);
3}

animation-delay

animation-delay属性指定动画开始前的等待时间，以秒(s)或毫秒(ms)为单位。

css 
1div {
2    animation-delay: 2s;
3}

可以指定负值，让动画立即开始，但会跳过指定时间的动画：

css 
1div {
2    animation-delay: -1s; /* 动画会从1秒处开始播放 */
3}

animation-iteration-count

animation-iteration-count属性指定动画应该播放的次数。

css 
1div {
2    animation-iteration-count: 3;
3}

使用infinite值可以让动画无限循环：

css 
1div {
2    animation-iteration-count: infinite;
3}

animation-direction

animation-direction属性指定动画是否应该轮流反向播放。

css 
1div {
2    animation-direction: alternate;
3}

可选值：

  • normal - 默认值，动画正向播放
  • reverse - 动画反向播放
  • alternate - 动画先正向播放，然后反向播放，如此交替
  • alternate-reverse - 动画先反向播放，然后正向播放，如此交替

animation-fill-mode

animation-fill-mode属性指定动画结束时元素的样式。

css 
1div {
2    animation-fill-mode: forwards;
3}

可选值：

  • none - 默认值，动画完成后回到初始状态
  • forwards - 动画完成后保持最后一帧的状态
  • backwards - 动画开始前，元素就应用第一帧的状态
  • both - 同时应用forwards和backwards的效果

animation-play-state

animation-play-state属性指定动画是运行还是暂停。

css 
1div {
2    animation-play-state: paused;
3}

可选值：

  • running - 默认值，动画正在运行
  • paused - 动画暂停

这对于需要通过用户交互控制动画的情况非常有用：

css 
1.animated {
2    animation: example 5s infinite;
3    animation-play-state: running;
4}
5
6.animated:hover {
7    animation-play-state: paused;
8}

简写animation属性

animation是一个简写属性，用于同时设置所有动画属性：

css 
1div {
2    /* name duration timing-function delay iteration-count direction fill-mode play-state */
3    animation: example 5s linear 2s infinite alternate forwards running;
4}

可以指定多个动画，用逗号分隔：

css 
1div {
2    animation: slide 2s ease, fade 3s ease-in;
3}

一个完整的动画示例

下面是一个简单的动画示例，一个方块从左向右移动，然后回到原位：

css 
 1/* 定义关键帧 */
 2@keyframes move {
 3    0% {
 4        transform: translateX(0);
 5    }
 6    50% {
 7        transform: translateX(300px);
 8    }
 9    100% {
10        transform: translateX(0);
11    }
12}
13
14/* 应用动画 */
15.box {
16    width: 100px;
17    height: 100px;
18    background-color: red;
19    animation: move 4s ease infinite;
20}

实际应用示例

1. 加载动画

css 
 1@keyframes spinner {
 2    0% { transform: rotate(0deg); }
 3    100% { transform: rotate(360deg); }
 4}
 5
 6.loader {
 7    width: 40px;
 8    height: 40px;
 9    border: 4px solid #f3f3f3;
10    border-top: 4px solid #3498db;
11    border-radius: 50%;
12    animation: spinner 2s linear infinite;
13}

2. 脉冲效果

css 
1@keyframes pulse {
2    0% { transform: scale(1); opacity: 1; }
3    50% { transform: scale(1.1); opacity: 0.8; }
4    100% { transform: scale(1); opacity: 1; }
5}
6
7.pulse-button {
8    animation: pulse 2s ease infinite;
9}

3. 渐入渐出效果

css 
 1@keyframes fadeInOut {
 2    0% { opacity: 0; }
 3    25% { opacity: 1; }
 4    75% { opacity: 1; }
 5    100% { opacity: 0; }
 6}
 7
 8.banner {
 9    animation: fadeInOut 5s ease forwards;
10}

4. 弹跳效果

css 
1@keyframes bounce {
2    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
3    40% { transform: translateY(-30px); }
4    60% { transform: translateY(-15px); }
5}
6
7.bounce {
8    animation: bounce 2s infinite;
9}

CSS3 动画与CSS3 过渡的区别

CSS3动画与CSS3过渡有几个关键区别：

  1. 中间状态控制：过渡只能定义开始和结束状态，而动画可以定义多个中间状态。
  2. 自动播放：动画可以自动开始，而过渡需要触发事件。
  3. 循环能力：动画可以设置为循环播放，而过渡只执行一次。
  4. 方向控制：动画可以设置为正向、反向或交替播放。
  5. 更精细的控制：动画提供了更多控制选项，如填充模式和播放状态。

CSS3 动画属性总结

属性 描述 默认值
@keyframes 定义动画的关键帧 -
animation-name 指定动画的名称 none
animation-duration 指定动画的持续时间 0s
animation-timing-function 指定动画的速度曲线 ease
animation-delay 指定动画的延迟时间 0s
animation-iteration-count 指定动画的播放次数 1
animation-direction 指定动画的播放方向 normal
animation-fill-mode 指定动画结束时的样式 none
animation-play-state 指定动画的播放状态 running
animation 简写属性 -