CodeCode

なんか色々おぼえ書き。だいたいweb制作関連。

transitionで実装する簡単CSSアニメーション

transitionとは

transitionはCSSのプロパティの変化をアニメーションで表示させます。 animationとは違い、hover などアクションをきっかけにアニメーションが実行されます。 実行後は元のプロパティの値に戻ります。

ゴーストボタンのホバーアニメーション

ゴーストボタンにホバーすると背景色と文字色がアニメーションで変化します。

<button class="transition_btn">ボタン</button>
.transition_btn{
  background: none;
  border: none;
  display: block;
  width: 200px;
  height: 50px;
  border: solid 1px #ff7a85;
  font-size: 1.3rem;

  /* 変化前のプロパティ */
  background-color: transparent;
  color: #ff7a85;

  /* 変化させるプロパティ */
  transition-property: background-color, color;
  /* アニメーションにかける時間(秒) */
  transition-duration: .4s;
}

.transition_btn:hover{
  /* 変化後のプロパティ */
  background-color: #ff7a85;
  color: #fff;
}

この場合、transition-property に指定されたプロパティ background-colorcolor の擬似クラス :hover との差分が transition-duration に指定したように0.4秒かけてアニメーションで変化します。

transition-property に指定できるプロパティは基本的に widthheight など、値が数値、または colorbackground-color など、値が色のプロパティを指定できます。

display などは、値が数値でも色でもないのでアニメーションさせることができません。

その他のtransitionプロパティ

transition-delay

transition-delay は、指定した秒数だけ遅延してアニメーションが実行されます。

ボタンの例に追記するとホバーして1秒後にアニメーションが実行されます。

/* 変化させるプロパティ */
transition-property: background-color, color;
/* アニメーションにかける時間(秒) */
transition-duration: .4s;
/* アニメーションの遅延 */
transition-delay: 1s;

transition-timing-function

transition-delay は、アニメーションのタイミング・進行割合を指定します。

値は

  • ease
  • linear
  • ease-in

など。

参考: Easing Function 早見表

ボタンの例に transition-timing-function: linear 追記するとアニメーションが一定の速度で実行されます。

/* 変化させるプロパティ */
transition-property: background-color, color;
/* アニメーションにかける時間(秒) */
transition-duration: .4s;
/* アニメーションの進行割合 */
transition-timing-function: linear;

transition

transition はプロパティをまとめて指定できるショートハンドです。

transition:transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値;

background-color1秒遅延 して 0.4秒 かけて 一定の速度 でアニメーションさせる場合は、

transition: background-color .4s linear 1s;

background-color1秒遅延 して 0.4秒 かけて 一定の速度 でアニメーションさせ、同様に color1秒遅延 して 0.4秒 かけて 一定の速度 でアニメーションさせる場合は、カンマで区切って記述する。

transition: background-color .4s linear 1s, color .4s linear 1s;
トップへ戻る