在html中加动画效果,html5中css3新添加的动画效果
字css3中，動(dòng)畫著重要說(shuō)的就是：transition屬性，表示過(guò)渡
(1)
如何定義一個(gè)動(dòng)畫：
如需在 CSS3 中創(chuàng)建動(dòng)畫，您需要學(xué)習(xí) @keyframes 規(guī)則。
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;//為這個(gè)div附加一個(gè)動(dòng)畫 名字為myfirst
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst//規(guī)定動(dòng)畫的執(zhí)行過(guò)程
{
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 中無(wú)效。
如何創(chuàng)建一個(gè)過(guò)渡
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;
}
請(qǐng)把鼠標(biāo)指針?lè)诺近S色的 div 元素上，來(lái)查看過(guò)渡效果。
注釋：本例在 Internet Explorer 中無(wú)效。
注釋：這個(gè)過(guò)渡效果會(huì)在開(kāi)始之前等待兩秒。
總結(jié)
以上是生活随笔為你收集整理的在html中加动画效果,html5中css3新添加的动画效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
