css--アニメーション
41608 ワード
一般的にhtml+cssは静的ページしか作成できないと考えられていますが、css 3では動的ページを作成できます.
この章では、cssでアニメーションを作成する方法について説明します.
cssでアニメーションを作成するには@keyframesガイドラインによって定められています
アニメーションの長さを指定し、アニメーションの名前を指定します.
まずプログラムで見てみましょう.
css
また、アニメーションアトリビュートを設定するときは、少なくともアニメーション名、アニメーション時間を指定します.アニメーションには具体的には、w 3 c規格を参照してください.
この章では、cssでアニメーションを作成する方法について説明します.
cssでアニメーションを作成するには@keyframesガイドラインによって定められています
アニメーションの長さを指定し、アニメーションの名前を指定します.
まずプログラムで見てみましょう.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> </title>
<link rel="stylesheet" type="text/css" href="donghua.css">
</head>
<body>
<div>
！
</div>
</body>
</html>css
div{
width:200px;
height:200px;
background-color: brown;
position:relative;
animation:anima 5s infinite alternate;// div ， anima ， 5s， infinite（ ）， （ ）
-webkit-animation: anima 5s infinite alternate;// chrome （ ， ， 。 。
-moz-animation：... 。）
}
@keyframes 。
@keyframes anima {
0% {
background-color: red;
width: 200px;
height: 200px;
left: 0px;// ， div 。
top: 0px;
}
25% {
background-color: royalblue;
width: 100px;
height: 100px;
left: 400px;
top: 0px;
}
50% {
background-color: burlywood;
width: 50px;
height: 50px;
left: 400px;
top: 400px;
}
75% {
background-color: green;
width: 100px;
height: 100px;
left: 0px;
top: 400px;
}
100% {
background-color: red;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
}
}
@-webkit-keyframes anima {
0%{background-color: red;width:200px;height:200px;left:0px;top:0px;
}
25%{background-color: royalblue;width:100px;height:100px;left:400px;top:0px;
}
50%{background-color: burlywood;width:50px;height:50px;left:400px;top:400px;
}
75%{background-color: green;width:100px;height:100px;left:0px;top:400px;
}
100%{background-color: red;width:200px;height:200px;left:0px;top:0px;
}また、アニメーションアトリビュートを設定するときは、少なくともアニメーション名、アニメーション時間を指定します.アニメーションには具体的には、w 3 c規格を参照してください.
div{
width:200px;
height:200px;
background-color: brown;
position:relative;
animation:anima 5s infinite alternate;
-webkit-animation: anima 5s infinite alternate;
}
@keyframes anima {
0% {
background-color: red;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
}
25% {
background-color: royalblue;
width: 100px;
height: 100px;
left: 400px;
top: 0px;
}
50% {
background-color: burlywood;
width: 50px;
height: 50px;
left: 400px;
top: 400px;
}
75% {
background-color: green;
width: 100px;
height: 100px;
left: 0px;
top: 400px;
}
100% {
background-color: red;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
}
}
@-webkit-keyframes anima {
0%{background-color: red;width:200px;height:200px;left:0px;top:0px;
}
25%{background-color: royalblue;width:100px;height:100px;left:400px;top:0px;
}
50%{background-color: burlywood;width:50px;height:50px;left:400px;top:400px;
}
75%{background-color: green;width:100px;height:100px;left:0px;top:400px;
}
100%{background-color: red;width:200px;height:200px;left:0px;top:0px;
}