CSS3アニメーションの遷移時間
CSS3のanimation-durationプロパティの詳細説明:
このプロパティは、アニメーションアニメーションの遷移時間を設定するために使用されます。
アニメーション属性の詳細については、CSS3 でのアニメーション属性の使用法の詳細な説明の章を参照してください。
文法構造:
animation-duration：<time> [ ,<time>]*
パラメータ分析:
time: アニメーションの実行時間を指定します。単位は秒(s)です。
特記事項:
複数の属性値を指定する場合は、カンマで区切ってください。
対応するスクリプト機能はanimationDurationです。
コード例:
例 1:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</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> 上記のコードは、アニメーションの継続時間を 8 秒に設定します。
例 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</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 を使用して、2 つのアニメーションの 2 つのアニメーション期間をそれぞれ指定します。
新しいファイル
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</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>
プレビュー
Clear
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
