「CSS3 」动画详解

CSS3 提供给了我们非常多的转换函数:

  • 2D: translate, rotate, scale, skew.
  • 3D: translate3d, rotate3d, scale3d, skew3d.

只需要将这些函数作为transform属性的值,就可以设置相应的效果。

CSS3 动画则是将这些效果以及其他CSS属性按照你设定的方式来进行互相转变。

1. 动画相关属性

属性 | 描述
--------------------------- | ------------------------------------------------------------------------------
@keyframes | 定义动画各个阶段的状态的代码段
animation | 所有动画属性的简写属性,除了 animation-play-stateanimation-fill-mode 属性。
animation-name | 规定 @keyframes 动画的名称。
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function | 规定动画的速度曲线。默认是 ease
animation-delay | 规定动画何时开始。默认是 0。
animation-iteration-count | 规定动画被播放的次数。默认是 1。
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 normal
animation-play-state | 规定动画是否正在运行或暂停。默认是 running
animation-fill-mode | 规定元素在动画开始前和完成后的状态,默认是 none

@keyframes

定义动画各个阶段的状态的代码段。比如开始态,结束态,中间态(使用百分比表示)。

@keyframes exampleName {
    from {
        transform: rotateY(0deg);
        background: #000000;
    }
    50% {
        transform: rotateY(180deg);
        background: #00fa7e;
    }
    to {
        transform: rotateY(0deg);
        background: #008dff;
    }
}

animation-name

使用 @keyframes 定义的状态集合名称,如上面的 exampleName

animation-duration

动画的周期时间。单位可以是秒(s),也可以是毫秒(ms)。

animation-timing-function

动画变化速度函数,有如下几种选项:

  • linear: 速度不变。cubic-bezier(0,0,1,1)
  • ease-in: 低速开始 ~ 正常速度。cubic-bezier(0.42,0,1,1)
  • ease-out: 正常速度 ~ 低速结束。cubic-bezier(0,0,0.58,1)
  • ease-in-out: 低速开始 ~ 正常速度 ~ 低速结束。cubic-bezier(0.42,0,0.58,1)
  • ease: 与 ease-in-out 基本相同,但是开始稍微比结束快一点儿。cubic-bezier(0.25,0.1,0.25,1)
  • cubic-bezier(x1, y1, x2, y2): 使用三次贝塞尔函数作为速度函数。

cubic-bezier曲线测试调试网站:cubic-bezier

animation-delay

动画开始之前等待的时间。单位可以是秒(s),也可以是毫秒(ms)。

animation-iteration-count

动画的循环次数。可以是具体的次数,也可以是 infinite,表示无限循环播放。

animation-direction

动画循环的方向:

  • normal: 正向播放。
  • reverse: 反向播放。
  • alternate: 正向播放与反向播放交替进行。

animation

以上6个属性可以使用这一个属性来表示,格式为:

animate: name duration timing-function delay iteration-count direction;

animation-play-state

控制动画的状态,有播放(running)和暂停(paused)两种状态。

animation-fill-mode

规定元素在动画开始前和完成后的状态。

  • none: 元素在动画前后的状态和动画没有联系。
  • forwards: 动画完成后,元素保持动画最后的状态。
  • backwards: 动画开始前,元素保持动画开始的状态。
  • both: forwardsbackwards 的结合。

2. transition

CSS3 除了 animation 相关的属性以外,还提供给我们一个 transition 属性,格式为:

transition: propertyName duration [timing-function] [delay], ...;

大家可能已经也看出来了,其实 transition 就是 @keyframes 只有 fromto 两个状态,并且播放次数为1,且不能暂停的 animation

举个例子,当鼠标放到一个 div 上的时候,它旋转90度,并且背景从黑色变为灰色,字体从白色变为黑色。

<div id="division2"></div>
#division2 {
    width: 300px;
    height: 100px;
    margin-top: 50px;
    font-size: 2em;
    text-align: center;
    line-height: 100px;
    color: #FFF;
    background: #000;
    transition: transform 2s linear 0s, background 2s linear 0s, color 2s linear 0s;
}

#division2:hover {
    background: #cccdd1;
    color: #000;
    transform: rotate(90deg);
}

3. Demo

[重要提示]请不要忘记推荐收藏 (╯‵□′)╯︵ ┴─┴

git clone https://github.com/JasonKid/fezone.git

搜索 动画详解

阅读 3.3k

推荐阅读
Jasonの前端地界
用户专栏

作者在前端学习路上的知识总结。

43 人关注
14 篇文章
专栏主页