大阪府堺市のWEB制作(ホームページ制作)事務所です

animationアニメーション仕組み

最終更新日:2022.05.23 [月] 公開日:2020.08.01 [土] カテゴリー:html・CSS・jQuery・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;
  }

}

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の値 ;
詳細はMDN

スポンサーリンク

コメントを残す