CodeCode

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

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

transitionとは

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

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

ボタン

.transition_btn {
    background: none;
    border: none;
    display: block;
    cursor: pointer;
    width: 200px;
    height: 50px;
    border: solid 1px #ff7a85;
    font-size: 1.3rem;
    background-color: transparent;
    color: #ff7a85;
    transition-property: background-color, color;
    transition-duration: 0.4s;
}
.transition_btn:hover {
    background-color: #ff7a85;
    color: #fff;
}

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

<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-color と color の擬似クラス :hover との差分が transition-duration に指定したように0.4秒かけてアニメーションで変化します。

transition-property に指定できるプロパティは基本的に width や height など、値が数値、または color や background-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-color を 1秒遅延 して 0.4秒 かけて 一定の速度 でアニメーションさせる場合は、

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

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

transition: background-color .4s linear 1s, color .4s linear 1s;
TOPへ戻る