当前位置: IT培训 > HTML5培训 > 前端开发 > CSS > CSS3动画
CSS3动画 时间:2017-09-05     来源:CSS开发教程

使用CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画和JavaScript。因此学好CSS动画对我们以后的工作还是有很大帮助的,今天小编就为大家分享一些CSS动画方面的知识。

CSS3关键帧规则

要创建CSS3的动画,你必须了解@关键帧规则(Keyframes)。

@关键帧的规则是创建动画。@关键帧规则内指定CSS风格和动画将逐步从目前的风格改变为新的样式。

浏览器支持

CSS开发教程

@keyframes IDENT {

from {

Properties:Properties value;

}

Percentage {

Properties:Properties value;

}

to {

Properties:Properties value;

}

}

或者全部写成百分比的形式:

@keyframes IDENT {

0% {

Properties:Properties value;

}

Percentage {

Properties:Properties value;

}

100% {

Properties:Properties value;

}

}

@keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}

@-moz-keyframes myfirst /* Firefox */

{

from {background: red;}

to {background: yellow;}

}

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

{

from {background: red;}

to {background: yellow;}

}

@-o-keyframes myfirst /* Opera */

{

from {background: red;}

to {background: yellow;}

}

div

{

animation: myfirst 5s;

-moz-animation: myfirst 5s; /* Firefox */

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

-o-animation: myfirst 5s; /* Opera */

}

animation的属性有下面这么几种内容:

-webkit-animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名*/

-webkit-animation-duration: 10s;/*动画持续时间*/

-webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/

-webkit-animation-delay: 2s;/*动画延迟时间*/

-webkit-animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/

-webkit-animation-direction: alternate;/*定义动画方式*/

X