在html中加动画效果 html5中css3新添加的动画效果

字css3中，动画着重要说的就是：transition属性，表示过渡

(1)

如何定义一个动画：

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:myfirst 5s;//为这个div附加一个动画 名字为myfirst

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

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

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

}

@keyframes myfirst//规定动画的执行过程

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-moz-keyframes myfirst /* Firefox */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

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

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-o-keyframes myfirst /* Opera */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

注释：本例在 Internet Explorer 中无效。

如何创建一个过渡

div

{

width:100px;

height:100px;

background:yellow;

transition-property:width;

transition-duration:1s;

transition-timing-function:linear;

transition-delay:2s;

/* Firefox 4 */

-moz-transition-property:width;

-moz-transition-duration:1s;

-moz-transition-timing-function:linear;

-moz-transition-delay:2s;

/* Safari and Chrome */

-webkit-transition-property:width;

-webkit-transition-duration:1s;

-webkit-transition-timing-function:linear;

-webkit-transition-delay:2s;

/* Opera */

-o-transition-property:width;

-o-transition-duration:1s;

-o-transition-timing-function:linear;

-o-transition-delay:2s;

}

div:hover

{

width:200px;

}

请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。

注释：本例在 Internet Explorer 中无效。

注释：这个过渡效果会在开始之前等待两秒。