まず、アニメーション（アニメーション）
1. CSS3アニメーションとは何ですか？
- アニメーション要素は、別のスタイルの効果への一つのスタイルから徐々に変化です。あなたは何回として多くのスタイルとして変更することができます。
- アニメーションが
CSS3最も破壊的な特性の一つは、精密な制御が映画または複数のノードによって提供される基であってもよく、それによって、複雑なアニメーションを実現します
2.アニメーションの基本的な使用
- アニメーションを定義します
- 定義されたアニメーションの呼び出しで
3.構文（定義されたアニメーション）
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
4.構文（アニメーション）
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间；
}
第二に、アニメーションシーケンス
- 0％は、アニメーションの始まりである、アニメーションが100％を行って、そのルールは、アニメーションシーケンスです
- 徐々に現在のスタイルから変更@keyframsのCSSスタイルで指定されたアイテムは、アニメーションの新しいスタイルを作成しました
- アニメーション要素が徐々に別のスタイルの効果に一つのスタイルから変更することで多くのスタイルとして、何度でも変更することができます
- 所定の時間の変化率、又は有する
fromとto0％と100％に相当
サンプルコード
<body>
<div> </div>
</body>
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0)
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
animation-name: move;
animation-duration: 10s;
}
結果：
第三に、アニメーションの共通プロパティ
1.共通プロパティ
コード例2
<body>
<div> </div>
</body>
div {
width: 100px;
height: 100px;
background-color: aquamarine;
/* 动画名称 */
animation-name: move;
/* 动画花费时长 */
animation-duration: 2s;
/* 动画速度曲线 */
animation-timing-function: ease-in-out;
/* 动画等待多长时间执行 */
animation-delay: 2s;
/* 规定动画播放次数 infinite: 无限循环 */
animation-iteration-count: infinite;
/* 是否逆行播放 */
animation-direction: alternate;
/* 动画结束之后的状态 */
animation-fill-mode: forwards;
}
div:hover {
/* 规定动画是否暂停或者播放 */
animation-play-state: paused;
}
結果：
第四に、アニメーション速記
1.アニメーション速記
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
2.知識ポイント
- 含まれていません速記プロパティ
animation-paly-state - アニメーションを停止し
animation-paly-state: paused、他のマウスを使用した後などで頻繁にと。 - むしろ直接転送バックよりも、アニメーションに戻るには：
animation-direction: alternate - ボックスのアニメーションの後、終了位置で停止します。
animation-fill-mode: forwards
3.コード例
animation: move 2s linear 1s infinite alternate forwards;
第五に、速度曲線の詳細
1.速度プロファイルの詳細
animation-timing-function：デフォルトでは、アニメーションカーブの速度を指定ease
コード例2
<body>
<div>我是一个字一个字显示</div>
</body>
div {
width: 0px;
height: 50px;
line-height: 50px;
white-space: nowrap;
overflow: hidden;
background-color: aquamarine;
animation: move 4s steps(24) forwards;
}
@keyframes move {
0% {
width: 0px;
}
100% {
width: 480px;
}
}
結果：
