使用CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画和JavaScript。因此学好CSS动画对我们以后的工作还是有很大帮助的,今天小编就为大家分享一些CSS动画方面的知识。
CSS3关键帧规则
要创建CSS3的动画,你必须了解@关键帧规则(Keyframes)。
@关键帧的规则是创建动画。@关键帧规则内指定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;/*定义动画方式*/
热点新闻
前端开发技术库