animationアニメーション仕組み
最終更新日:2022.05.23 [月] 公開日:2020.08.01 [土] カテゴリー:html・CSS・jQuery・JS備忘
.box1{ width:150px; height:150px; background-color: #000; animation-name:anime_1;/*次の@keyframesで設定するアニメーションの名前*/ animation-duration:1s;/*変化にかかる時間*/ animation-timing-function:ease-in;/*イージング*/ animation-delay:1s;/*アニメーションが始まるまでの時間*/ animation-iteration-count:infinite;/*設定したアニメーションを何回繰り返すか*/ animation-direction:alternate;/*アニメーションの再生方向*/ animation-fill-mode:none;/*アニメーション開始前終了後のスタイル*/ animation-play-state:running;/*アニメーションの再生or停止*/ } @keyframes anime_1{ 0% {/*このパーセントが動きの進度の部分です*/ transform: none; } 80% {/*アニメーションが80%進んだところのスタイル*/ transform: translateX(100px) ; border-radius:150px; } 100% { transform: translateX(300px) ; border-radius:0px; } }
animationプロパティ
animation-name | 設定するkeyframeのアニメーションの名前を指示する。 | |
---|---|---|
animation-duration | 変化にかかる時間。アニメーション開始から終了までの時間。 | 初期値0s |
animation-timing-function | 変化前・変化後の間の動きの速度などの変化。イージング。 | ease:変化の始まりと終わりが速く動く |
animation-delay | アニメーションが始まるまでの時間。 | 初期値0s |
animation-iteration-count | 設定したアニメーションを何回繰り返すか。 | 初期値は1。 infiniteで無限に繰り返しループ |
animation-direction | アニメーションの再生方向。 | normal(初期値):通常再生 reverse:反対再生 alternate:通序方向逆方向を繰り返す alternate-reverse:逆方向通常方向を繰り返す |
animation-fill-mode | アニメーション開始前終了後のスタイル。初期値はnone。 |
none(初期値):開始前終了後にアニメーションのスタイルは適用されない forwards:終了時のスタイルがアニメーションのスタイル backwards:開始時のスタイルが開始前にも適用 both:forwardsとbackwardsどちらも適用 |
animation-play-state | アニメーションの再生or停止。初期値はrunning(実行) | running(初期値):再生 paused:一時停止 |
animation | まとめて指定可能。半角区切りで上記の値を入れていく。 animation: nameの値 durationの値 timingの値 delayの値 iterationの値 directionの値 fillの値 playの値 ; |
コメントを残す
コメントを投稿するにはログインしてください。