CSS3によって、我々は、Webページの数でアニメーション画像を置き換えることができアニメーションを作成するFlashアニメーションやJavaScriptことができます
まず、キーフレーム開発する必要がありますアニメーションを形成するために@keyframesを。
定義されたキーフレーム：
@keyframes mymove {
{初期状態属性から}
端状態特性に{}
}
又は
@keyframes mymove {
0}％{初期状態属性
50％（中間缶、キーフレームを追加）
100％完了ステータス属性の{ }
}
キーフレームを開発し、あなたが使用する必要がありますアニメーションと呼ばれるプロパティを
だから何な特性は、それをアニメ化していますか？私はそれを参照してくださいに従ってください！
1、アニメーション名
図1は、アプリケーション設定オブジェクトのアニメーション名は、キーフレームの名前である
@keyframes mymove {}アニメーション名：ルール@keyframes、実施例と関連して使用される2 ：mymove。
2、アニメーション期間
期間アニメートに設定
説明：アニメーションの継続時間：3秒;アニメーションは、時間の3秒を使用して行われました
3、アニメーションタイミング機能
オブジェクトのアニメーションのトランジションタイプを設定し
たプロパティ値を：
- 線形：線形推移。ベジェ曲線は、（0.0、0.0、1.0、1.0）と同等です
- 簡単：スムーズな移行。ベジェ曲線は、（0.25、0.1、0.25、1.0）と同等です
- 使いやすさに：スローからファストまで。ベジェ曲線は、（0.42、0、1.0、1.0）と同等です
- 簡単にアウト：ファストからスローへ。ベジェ曲線は、（0、0、0.58、1.0）と同等です
- 安心・イン・アウト：遅いから、その後、低速、高速とします。ベジェ曲線は、（0.42、0、0.58、1.0）と同等です
- ステップスタート：すぐにアニメーションの各状態の終了フレームにジャンプします
4、アニメーション遅延
遅延時間の設定オブジェクトのアニメーションの
説明：アニメーションディレイ：1秒、遅延時間1sの開始前に、アニメーション
図5に示すように、アニメーション方向
サイクルで提供後方動きアニメーションオブジェクトかどうか
のプロパティ値：
- 通常：通常の方向
- リバース：逆方向を実行します
- 代替：アニメーションは、第1およびその後の実行とは反対方向に走る、交互に実行し続け
- 正の方向を実行し、動作を交互に続け、次いで抗ランアニメーション第：逆交互
6、アニメーションプレイ状態
オブジェクトアニメーションの状態を設定
プロパティ値を：
- アニメーションプレイ状態：スポーツ走行
- アニメーションプレイ状態：一時停止、一時停止
7、アニメーションの繰り返しカウント
アニメイトに設定サイクル
プロパティ値：
- アニメーションの繰り返しカウント：無限無限ループ
- アニメーションの繰り返しカウント数のサイクル数を加えたアニメーションがループ数回
より良い理解を容易にするために、私は少しデモを行いました
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.circle {
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 0;
top: 300px;
border-radius: 100%;
animation: move 5s 1s linear infinite alternate;
animation: move 5s linear infinite alternate;
animation: move 5s ease infinite alternate;
animation: move 5s ease-in infinite alternate;
animation: move 5s ease-out infinite alternate;
animation: move 5s ease-in-out infinite alternate;
animation: move 5s step-start infinite alternate;
}
.circle:hover {
animation-play-state: paused;
}
@keyframes move {
0% {
left: 0;
background: pink;
}
20% {
left: 200px;
background: red;
}
40% {
left: 400px;
background: yellow;
}
60% {
left: 600px;
background: green;
}
80% {
left: 800px;
background: blue;
}
100% {
left: 1000px;
background: purple;
}
0% {
left: 0;
background: pink;
}
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
あなたはああを試すために始めることができます！
