animation相关的CSS属性

参考

animation相关属性是CSS3提供的帧动画功能,IE9及以下版本不支持这些属性。

animationtransition的用法非常相似。 只是transition需要事件触发,而animation不需要。

1.1、keyframes

keyframes是用来定义关键帧的。帧动画就是用这些关键帧连成的。如果你做过视频编辑的话, 应该对这个很熟悉,视频就是由非常多的图像连成的,只是每张图像之间的切换速度非常快,如果每秒钟至少有60帧能连续显示的话, 人眼就看不出不连贯,也就是看不出卡顿,人眼看到的就是平滑的。

每秒钟显示多少帧,有个术语叫FPS(Frames Per Seconds)。提升流畅度,就是要提升这个值,最起码要达到60FPS

keyframes的使用格式:

@keyframes animation-name {keyframes-selector { css-properties; }}

keyframes-selector是一些百分数,比如0%20%100%之类的, 数字是随意的,只要在0-100之间都可以。0%可以使用关键词from来代替,100%可以使用关键词to来代替。

keyframes-selector通常是多个,每一个就是一帧,显然,只有有多个帧才能动起来嘛。

示例:

@keyframes 'wobble' {
    0% {
        margin-left: 100px;
        background: green;
    }
    40% {
        margin-left: 150px;
        background: orange;
    }
    60% {
        margin-left: 75px;
        background: blue;
    }
    100% {
        margin-left: 100px;
        background: red;
    }
}

wobble就是动画名称,名字任意取。定义一个名字,是为了方便其他属性使用。

0%40%60%100%等都是关键帧。

每个帧里面的是切换到对应帧时候的CSS属性。

1.2、animation-name属性

animation-name属性用来指定要使用哪个动画。

animation-name的使用格式:

animation-name : none | name1 [, name2]

none为默认值,当值为none时,将没有任何动画效果。

name1就是用keyframes定义的动画名称。可以一次性指定多个动画。

1.3、animation-duration属性

animation-duration设置这个过度过程要持续多久。单位是s,而且必须带上s,即使是0也要带上。

animation-duration的使用格式:

animation-duration : value [, value]

可以设置多个值。并且必须带上单位s。

1.4、animation-delay属性

animation-delay设置这个过度要从多久之后开始。单位是s,而且必须带上s,即使是0也要带上。

animation-delay的使用格式:

animation-delay : value [, value]

可以设置多个值。并且必须带上单位s。

1.5、animation-timing-function属性

animation-timing-function设置这个过度过程中的变化节奏函数。

animation-timing-function的使用格式:

animation-timing-function : value [, value]

可以设置多个值。每个值都是字符串。

animation-timing-function可以使用下面的值:

  • ease
    又快到慢,这是默认值。
  • linear
    恒速
  • ease-in
    速度越来越快
  • ease-out
    速度越来越慢
  • ease-out
    速度先变快后又变慢
  • cubic-bezier(n,n,n,n)
    使用贝塞尔曲线方程式,随意指定四个参数。上面的5个方式都是特定参数的贝塞尔曲线。 贝塞尔曲线在计算机图形学中有着广泛的应用,在绘图工具PSSketch中你都会遇到它。 本来它是让图形边缘变得不再是直的,从而绘制光滑的曲线,把它应用到速度变化上, 能够让速度变化是连贯的,而不是突兀和生硬的!
1.6、animation-iteration-count属性

animation-iteration-count设置动画播放次数。

animation-iteration-count的使用格式:

animation-iteration-count : n | infinite

n是自然数。

infinite表示无限循环。

1.7、animation-direction属性

animation-direction设置动画执行方向。

animation-direction的使用格式:

animation-direction : normal | alternate

normal表示依次执行每一帧。

alternate本意是摇摆,表示奇数帧正常播放,而在偶数帧向后播放。这样就像钟摆一样,是对称的。

1.8、animation属性

animation属性是复合属性。它由下面这些属性组合而成:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

animation的使用格式:

animation : single-animation [, single-animation]

这表示可以设置多段,每一段时间用逗号隔开。每一段的格式如下:

animation-name animation-duration [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction]

示例:

@keyframes 'wobble' {
    0% {
        margin-left: 100px;
        background: green;
    }
    40% {
        margin-left: 150px;
        background: orange;
    }
    60% {
        margin-left: 75px;
        background: blue;
    }
    100% {
        margin-left: 100px;
        background: red;
    }
}

.sliding-menu {
    animation: wobble 2s linear 200ms infinite alternate;
}