CSS3動畫的過渡時長
CSS3的animation-duration屬性詳解:
此屬性用于設(shè)置animation動畫的過渡時長。
更多關(guān)于animation屬性內(nèi)容可以參閱CSS3的animation屬性用法詳解一章節(jié)。
語法結(jié)構(gòu):
animation-duration：<time> [ ,<time>]*
參數(shù)解析:
time：規(guī)定動畫執(zhí)行的時長，單位是秒（s）。
特別說明:
如果提供多個屬性值，以逗號進行分隔。
對應(yīng)的腳本特性為animationDuration。
代碼實例:
實例一:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation infinite alternate;
-webkit-animation:theanimation infinite alternate ;
-moz-animation:theanimation infinite alternate ;
-o-animation:theanimation infinite alternate ;
-ms-animation:theanimation infinite alternate ;
-webkit-animation-duration:8s;
-moz-animation-duration:8s;
-o-animation-duration:8s;
-ms-animation-duration:8s;
animation-duration:8s;
}
@keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-moz-keyframes theanimation{
0% {top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-webkit-keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-o-keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上代碼設(shè)置動畫的時長為8秒。
實例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:firstanimation infinite alternate,secondanimation infinite alternate;
-webkit-animation:firstanimation infinite alternate,secondanimation infinite alternate;
-moz-animation:firstanimation infinite alternate,secondanimation infinite alternate;
-o-animation:firstanimation infinite alternate,secondanimation infinite alternate;
-ms-animation:firstanimation infinite alternate,secondanimation infinite alternate;
-webkit-animation-duration:5s,2s;
-moz-animation-duration:5s,2s;
-o-animation-duration:5s,2s;
-ms-animation-duration:5s,2s;
animation-duration:5s,2s;
}
@keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-webkit-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-moz-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-o-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-ms-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上代碼使用animation-duration規(guī)定了兩個動畫時長分別用于兩個動畫。
