[CSS] トランジション(transition)

Study / Javascript, Jquery, Css    作成日付 : 2019/12/18 20:33:57   修正日付 : 2019/12/18 20:35:20

こんにちは。明月です。


CSSのトランジション(transition)とは属性変更時に変更の速度を調節すること、変更のサイクルを設定することだと思われます。

例えば、「div」タグの背景色を黄色にしてマウスを置く(hover)と緑色になることに設定すると思うと実際にタグで設定するとあっというまで処理されますね。

例

マウスを上に置いてください。

でもユーザによってこの変更することをスムースにアニメーションのようなアクションを与えたい人が言うと思います。

その時にトランジション(transition)を利用すると設定ができます。

例

マウスを上に置いてください。 
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div>マウスを上に置いてください。</div>
  </body>
</html>

div {
  background-color: yellow;
  transition-property:background-color;
  transition-duration:2s;
  transition-timing-function:ease-out;
  transition-delay:50ms  
}
div:hover {
  background-color: green;
  transition: background-color 2s ease-out 50ms;
}

トランジションは４つのスタイル属性があります。４つと言ってもdelayの属性以外にはすべて設定しなければ作動しないですね。


「transition-property」はトランジションの属性を与えるCSSスタイル名です。上の例では「background-color」に効果を与えますね。

「transition-duration」は変換する時間です。上の例とは黄色から緑色に変換することで2秒かかりますということですね。

「transition-timing-function」は変換のタイプですが、「ease-out」は初めは遅くて早く変換するタイプ、「ease-in」は初めは早くて遅く変換するタイプ、「ease-in-out」は初めは早くて遅くなるがまた、早く変換するタイプ、「linear」は一定な速度で変換するタイプ、「cubic-bezier(n,n,n,n)」は直接に変換速度を指定するタイプがあります。

「transition-delay」は初めから変換ではなく、指定した時間の後で変換することです。


上のことは黄色から緑色に変換することで0.5秒あと2秒間に初めは遅く早く変換するスタイルです。


その以外にテキストにもアクションを上げることが出来ます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      textarea {
        width: 100%;
        height: 50px;
        transition-property: height;
        transition-duration: 1s;
        transition-timing-function: ease-out;
      }
      textarea: focus {
        height: 200px;
        transition-property: height;
        transition-duration: 5s;
        transition-timing-function: ease-in-out;
      }
    </style>
  </head>
  <body>
    <textarea placeholder="please input text!"></textarea>
  </body>
</html>

例

実際にウェブサービスでも、色々アクションや広告などのフォーカスを与え視線を集めるようにする方法でよく使っているスタイプです。


でも、逆にウェブページでトランジションが多ければ集中度を落とす逆効果もあります。

◀前の投稿[CSS] Columnスタイル
次の投稿▶[CSS] トランスフォーム (transform)
#css,#transition
「Study / Javascript, Jquery, Css」の他投稿
最新投稿