Justin's Words

CSS3 Animation

Posted on | In |

CSS 动画指的是 CSS3 的新特性 animation, @keyframes 和 transition。

如果发现动画不起作用注意加上浏览器前缀。

浏览器兼容性

Descktop:

  • Chrome(-webkit)
  • Firfox(-moz)(16.0 以上不需前缀)
  • Internet Explorer(10)
  • Opera(-o)(12.10 以上不需前缀)
  • Safari(-webkit)

Mobile:

  • Android(-webkit)
  • Firfox(-moz)(16.0 以上不需前缀)

用法

先使用 @keyframes 定义动画，然后通过 animation 属性调用。

@keyframes

语法

1
2
3
4
5
6
7
8
9
@keyframes <identifier> {
    [ [ from | to | <percentage> ] [, from | to | <percentage]* block ] ]*
}

@keyframes animate {
    0% { background: #666; }
    50% { width: 200px; height: 200px; background: blue; }
    100% { background: yellowgreen; }
}

其中 0% 可以替换为 from，100% 可以替换为 to：

1
2
3
4
5
@keyframes animate {
    from { background: #666; }
    50% { width: 200px; height: 200px; background: blue; }
    to { background: yellowgreen; }
}

由于浏览器支持不一，所以需要添加浏览器前缀规则：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@keyframes animate {
    from { background: #666; }
    50% { width: 200px; height: 200px; background: blue; }
    to { background: yellowgreen; }
}
@keyframes animate {
    from { background: #666; }
    50% { width: 200px; height: 200px; background: blue; }
    to { background: yellowgreen; }
}
@-webkit-keyframes animate {
    0% { background: #666; }
    50% { width: 200px; height: 200px; background: blue; }
    100% { background: yellowgreen; }
}
@-moz-keyframes animate {
    0% { background: #666; }
    50% { width: 200px; height: 200px; background: blue; }
    100% { background: yellowgreen; }
}
@-o-keyframes animate {
    0% { background: #666; }
    50% { width: 200px; height: 200px; background: blue; }
    100% { background: yellowgreen; }
}

百分比表示的动画发生的时间，所以可以使用多个百分比。

1
2
3
4
5
6
7
@keyframes animate {
    from { background: #666; }
    25% { width: 100px; height: 100px; background: orange; }
    50% { width: 200px; height: 200px; background: blue; }
    75% { width: 100px; height: 100px; background: pink; }
    to { background: yellowgreen; }
}

你甚至可以只用一个百分比，因为浏览器会自动计算动画发生时间，但必须有一个百分比存在。

1
2
3
@keyframes animate {
    50% { width: 200px; height: 200px; background: blue; }
}

同时你可以给每个阶段添加时间函数(具体查看下面 animation)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@keyframes bounce {
    from {
        top: 100px;
        animation-timing-function: ease-out;
    }
    25% {
        top: 50x;
        animation-timing-function: ease-in;
    }
    50% {
        top: 100px;
        animation-timing-function: ease-out;
    }
    75% {
        top: 75px;
        animation-timing-function: ease-in;
    }
    to {
        top: 100px;
    }
}

animation

接下来就是通过 animation 属性引用定义好的动画。

语法

1
animation: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

animation-timing-function 包括：

  • linear: 匀速
  • ease: 先加速后减速 (默认)
  • ease-in: 加速
  • ease-out: 减速
  • cubic-bezier: 自定义速度模式 (贝塞尔函数，制作可以使用这个)
1
2
3
div:hover {
    animation: bounce 1s ease;
}

使动画循环播放：

1
2
3
div:hover {
    animation: bounce 1s ease infinite;
}

使动画有限次播放（3 次）：

1
2
3
div:hover {
    animation: bounce 1s ease 3;
}

使动画保持在结束状态，使用 animation-fill-mode：

1
2
3
div:hover {
    animation: bounce 1s ease forwards;
}

animation-fill-mode 值包括：

  • none: 默认，回到动画没开始的状态
  • backwards: 动画回到第一帧的状态
  • both: 根据 animation-direction 轮流应用 forwards 和 backwards 规则

animation-direction 值包括：

  • normal
  • alternate
  • reverse
  • alternate-reverse

CSS Transition

指定动画过渡的时间。

语法

1
transition: property duration timing-function delay|initial|inherit;

分开来的属性：

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-dely
1
2
3
#box:hover {
    transition: opacity 1s ease-in 1s, width 1s linear 1s;
}