CSS3 动画

CSS3 动画

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

• 规定动画的名称
• 规定动画的时长

 

简单例子：

@keyframes myfirst

{

    from {background: red;}

    to {background: yellow;}

}

 

@-webkit-keyframes myfirst /* Safari 与 Chrome */

{

    from {background: red;}

    to {background: yellow;}

}

/*把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：*/

div {

animation: myfirst 5s;

 -webkit-animation: myfirst 5s; /* Safari 与 Chrome */

}

 

 

 

 

动画的所有属性：

实例

运行myfirst动画，设置所有的属性：

div {

animation-name: myfirst; /*规定动画*/

animation-duration: 5s; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/

animation-timing-function: linear; /*规定动画的速度曲线。默认是 "ease"。*/

animation-delay: 2s; /*规定动画何时开始。默认是 0。*/

animation-iteration-count: infinite; /*规定动画被播放的次数。默认是 1。*/

animation-direction: alternate; /*规定动画是否在下一周期逆向地播放。默认是 "normal"。*/

animation-play-state: running; /*规定动画是否正在运行或暂停。默认是 "running"。*/

/* Safari 与 Chrome: */

-webkit-animation-name: myfirst;

-webkit-animation-duration: 5s;

-webkit-animation-timing-function: linear;

-webkit-animation-delay: 2s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

-webkit-animation-play-state: running;

}

 

 

实例

与上面的动画相同，但是使用了简写的动画 animation 属性：

div {

animation: myfirst 5s linear 2s infinite alternate;

 /* Safari 与 Chrome: */

-webkit-animation: myfirst 5s linear 2s infinite alternate;

}