CHAKOIRO’s BLOG 関西のフリーランスWEB制作者のWEB知識備忘録 > html・CSS・JS備忘 > animationアニメーション仕組み

animationアニメーション仕組み

最終更新日：2021.10.01 [金]　公開日：2020.08.01 [土]　カテゴリー：html・CSS・JS備忘

animationスタイルはtransitionよりも少し細かい動きの設定ができます。 transitionは最初と最後のスタイルの設定だけですが、animationだと間の動きにもスタイルを入れることができるので、より動きが細やかにできます。

この動きは以下のスタイルで設定されています。

.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;
  }

}

.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：変化の始まりと終わりが速く動く ease-in：変化の始まりがゆっくり動く ease-out：変化の終わりがゆっくり動く ease-in-out：変化の始まりち終わりがゆっくり動く linear：ずっと同じスピートで動く cubic-bezier：カスタム設定 steps(数値,start)：開始時点で指定した数値の段階で変化 steps(数値,end)：終了時点で変化完了するように指定した数値の段階で変化 step-start：開始時点で変化 step-end：終了時点で変化
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の値　;