Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@hiro-hiro(hiro hiro)

CSS　アニメーション

Last updated at Posted at 2021-03-08

目次

  1. transitionについて
  2. animationについて

1. transitionについて

transition

  • スタイルの変更の開始時から終了時までの挙動を設定する
  • 開始時と終了時を定義するには？
    • :hoverなどの疑似クラス(:active, :focusなど)を使用する
    • javascriptを使用して、CSSのプロパティを変更する

例

css(transition)
.sample {
  background-color: red;
  width: 200px;
  height: 200px;
  transition: all 0.5s ease-out;
}

.sample:hover {
  background-color: blue;
  width: 300px;
}

結果
ezgif-2-de02b8a0c7c2.gif

transitionのプロパティを個別に設定する場合

以下の4つのプロパティが存在する。

  • transition-property　トランジションを適用する対象のCSSのプロパティの名前を指定
  • transition-duration　トランジションにかかる時間を指定
  • transition-timing-function　トランジションの速度変化を指定
  • transition-delay　トランジションを開始するまでの時間を指定

transition-property
トランジションを適用する対象のCSSのプロパティの名前を指定

css(transition-property)
.sample{
  background-color: red;
  width: 200px;
  height: 200px;
  transition-property: width;     /* transitionの設定が適用されるのは、widthのみ */
  transition-duration: 5s;
}

.sample:hover {
  background-color: blue;
  width: 300px;
}

transition-propertyに設定できる値
・all　全てのプロパティ
・none　プロパティ未指定
・margin-rightなど個別のプロパティ

例

css(transition-property)
.sample{
  background-color: red;
  width: 200px;
  height: 200px;

  transition-property: all;     /* 全てのプロパティ(この場合、widthとbackground-color)が対象 */
  transition-property: none;    /* 未指定 */
  transition-property: width, background-color /* widthとbackground-colorが対象 */
  transition-duration: 5s, 10s; /* 複数対応、widthが5sで、background-colorが10sで変わる */
}

.sample:hover {
  background-color: blue;
  width: 300px;
}

transition-duration
トランジションにかかる時間を指定

css(transition-duration)
.sample{
  background-color: red;
  width: 200px;
  height: 200px;
  transition-property: width;
  transition-duration: 5s;   /* 5sかけてスタイルが変更される */
}

.sample:hover {
  background-color: blue;
  width: 300px;
}

transition-timing-function
トランジションの速度変化を指定

transition-timing-functionに設定できる値

  • ease　開始時と終了時は緩やかに変化
  • linear　開始から終了まで一定に変化
  • ease-in　開始時は緩やかに変化、終了に近づくと早く変化
  • ease-out　開始時は早く変化、終了に近づくと緩やかに変化
  • ease-in-out　easeよりもゆっくり入り、加速し、ゆっくり終わる
  • step-start　開始自転で終了状態の値に変化する
  • step-end　終了時点まで変化せず、終了時点で終了状態の値に変化する
  • steps(ステップ数、ディレクション)　時間的変化をステップ数の数にステップに等分に区切って不連続に変化させる
    、ディレクションにはstart or endを指定する
  • cubic-beizer　自分でカスタムする
css(transition-timing-function)
.sample{
  background-color: red;
  width: 200px;
  height: 200px;

  transition-property: width;
  transition-duration: 5s;

  transition-timing-function: ease;
  transition-timing-function: linear;
  transition-timing-function: ease-in;
  transition-timing-function: ease-out;
  transition-timing-function: ease-in-out;
  transition-timing-function: step-start;
  transition-timing-function: step-end;
  transition-timing-function: steps(6, end);
  transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);
}

.sample:hover {
  background-color: blue;
  width: 300px;
}

transition-delay
トランジションを開始するまでの時間を指定

css(transition-delay)
.sample{
  background-color: red;
  width: 200px;
  height: 200px;
  transition-property: width;
  transition-duration: 5s;
  transition-delay: 5s;  /* 5s後にスタイルの変更が始まる */
}

.sample:hover {
  background-color: blue;
  width: 300px;
}

transitionのプロパティをまとめて設定する場合

個別に設定した時と同様、

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
    を設定する。
css(transition)

.sample {
  /* プロパティ名 | 時間 */
  transition: margin-right 4s;

  /* プロパティ名 | 時間 | 遅延 */
  transition: margin-right 4s 1s;

  /* プロパティ名 | 時間 | 時間関数 */
  transition: margin-right 4s ease-in-out;

  /* プロパティ名 | 時間 | 時間関数 | 遅延 */
  transition: margin-right 4s ease-in-out 1s;

  /* 2つのプロパティへの適用 */
  transition: margin-right 4s, color 1s;
  
  /* 変化するすべてのプロパティへの適用 */
  transition: all 0.5s ease-out;
}

2. animationについて

animation

  • キーフレームを利用したアニメーションを設定できる
css
@keyframes キーフレーム名 {
  0% { 始点のキーフレーム：アニメーションさせたいプロパティの初期状態 }
  100% { 終点のキーフレーム：アニメーションさせたいプロパティの最終状態 }
}
または
@keyframes キーフレーム名 {
  from { 始点のキーフレーム：アニメーションさせたいプロパティの初期状態 }
  to { 終点のキーフレーム：アニメーションさせたいプロパティの最終状態 }
}

例

css(animation)

/* 「%」は時間の割合を示す */
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation: my_anime 3s;  /* 3sかけてbackground-colorが変わっていく */
}

結果

画面収録-2021-03-08-21.11.29.gif

animationのプロパティを個別に設定する場合

以下のプロパティが存在する。

  • animation-name　アニメーション名（キーフレーム名）を指定
  • animation-duration　アニメーションにかかる時間（1回分）を指定
  • animation-timing-function　アニメーションの速度変化を指定
  • animation-delay　アニメーションを開始するまでの時間を指定
  • animation-iteration-count　アニメーションの繰り返し回数
  • animation-direction アニメーションの繰り返し方法（再生方向）を指定
  • animation-fill-mode ディレイ中と再生後の表示状態を指定
  • animation-play-state　アニメーションの再生と一時停止を指定

animation-name
アニメーション名（キーフレーム名）を指定

css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;
}

animation-duration
アニメーションにかかる時間（1回分）を指定

css(animation-duration)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;
}

animation-timing-function
アニメーションの速度変化を指定

css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-timing-function: ease;
  animation-timing-function: linear;
  animation-timing-function: ease-in;
  animation-timing-function: ease-out;
  animation-timing-function: ease-in-out;
  animation-timing-function: step-start;
  animation-timing-function: step-end;
  animation-timing-function: steps(6, end);
  animation-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);
}

animation-delay
アニメーションを開始するまでの時間を指定

css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-delay: 3s;
}

animation-iteration-count
アニメーションの繰り返し回数

css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-iteration-count: 2.5;
  animation-iteration-count: infinite;  /* infiniteで無限に繰り返す */
}

animation-direction
アニメーションの繰り返し方法（再生方向）を指定

css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-direction: normal;             /* 順方向にアニメーション */
  animation-direction: alternate;          /* 繰り返し時、偶数回は逆方向にアニメーション */
  animation-direction: reverse;            /* 逆方向にアニメーション */
  animation-direction: alternate-reverse;  /* 繰り返し時、奇数回は逆方向にアニメーション */
}

animation-fill-mode
ディレイ中と再生後の表示状態を指定

css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-fill-mode: none;       /* 元のスタイルのまま */
  animation-fill-mode: forwards;   /* 再生後、要素のスタイルは最後のキーフレーム状態のまま */
  animation-fill-mode: backwards;  /* 再生前、要素のスタイルは最初のキーフレーム状態に戻る */
  animation-fill-mode: both;       /* forwards, backwardsの両方を満たす */
}

animation-play-state
アニメーションの再生と一時停止を指定

css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-play-state: running;  /* アニメーションは実行中 */
  animation-play-state: paused;   /* アニメーションは一時停止している */
}

animationのプロパティをまとめて設定する場合

以下のような順番で設定が可能
animation: キーフレーム名 アニメーションにかかる時間 イージング 遅延時間 繰り返し回数 再生方向;

css
animation:sample_anime 0.3s ease-in-out 3s infinite alternate both;
0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?