手记

有关 animation 动画你要知道的

通过 CSS3,我们能够创建动画 animation,一个非常有意思的东西。它在许多网页中取代动画图片、JavaScript,甚至简单的Flash 动画,让页面生动起来。

实例

先举个简单的例子:

div {
    width:20px;
    height:20px;
    background:red;
    position:relative;
    animation:mymove 10s infinite;
    -webkit-animation:mymove 10s infinite; /*Safari and Chrome*/
}
@keyframes mymove {
    from {left:0px;}
    to {left:300px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/ {
    from {left:0px;}
    to {left:300px;}
}

在这个例子里:宽20px、长20px的红色方块,从屏幕左侧left=0的位置,匀速移动到left=300px的位置,并且循环运动。

来,我们来看这里的关键词:

mymove => 动画的名称

10s => 动画执行时间

infinite => 无限次重复

——————————手动分割线——————————

属性

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

想弄明白animation动画,首先,我们要知道他的几个属性:

1. animation-name
动画的名字,也就是绑定到选择器的 keyframe 名称。

2. animation-duration

动画执行从开始到结束花费的时间,默认是0,如果不设置该属性,就不会有动画效果。

3. animation-timing-function

动画运动速度。这个比较复杂,可以设置为:

· linear:匀速运动

· ease: 这个是默认的效果,低速-高速-低速。

· ease-in: 低速开始

· ease-out: 低速结束

· ease-in-out: 低速开始,低速结束

· cubic-bezier(n,n,n,n):n可以是0-1的任意值

4. animation-delay
动画延时执行,延迟的时间,默认是0,也可以设置负值。

5. animation-iteration-count
动画播放次数,infinite是无限播放

6. animation-direction
动画反向播出

——————————手动分割线——————————

keyframes

Chrome 和 Safari 需要前缀 -webkit-,

Firefox 需要前缀 -moz-,

Opera 需要前缀 -o-。

注意:Internet Explorer 9 以及更早的版本不支持 animation 属性。

11人推荐
随时随地看视频
慕课网APP