CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでborder-bottomプロパティをアニメーションさせる方法

CSSでは、border-bottomプロパティも@keyframesルールとanimationプロパティを組み合わせることで、滑らかにアニメーションさせることができます。ボーダーの太さ・スタイル・色が時間の経過とともに変化する演出は、要素を目立たせたい場合やページに動きを加えたい場合に便利です。

実装サンプル

以下のコードでは、div要素の下部ボーダーが3秒間のアニメーションで変化します。キーフレームの20%時点で、ボーダーが「25px・solid・オレンジ色」へと変化する仕組みです。コードをコピーしてブラウザで実行してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 500px;
            height: 400px;
            background: yellow;
            border: 5px dashed yellow;
            background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png');
            animation: myanim 3s infinite;
            background-position: bottom left;
            background-size: 50px;
         }
         @keyframes myanim {
            20% {
               background-color: maroon;
               background-position: bottom right;
               background-size: 90px;
               border-bottom: 25px solid orange;
            }
         }
      </style>
   </head>
   <body>
      <h2>Performing Animation for bottom border</h2>
      <div></div>
   </body>
</html>

コードのポイント

  • @keyframes myanim：アニメーションの中間状態を定義するルールです。ここでは進行率20%の時点でのスタイルを指定しています。
  • animation: myanim 3s infinite：定義したキーフレーム「myanim」を3秒かけて再生し、infiniteにより無限に繰り返します。
  • border-bottom: 25px solid orange：初期状態の「5px dashed」から、太さ25px・実線・オレンジ色の下部ボーダーへと変化します。
  • background関連プロパティ：背景色・背景位置・背景サイズも同時にアニメーションしており、複数プロパティを1つのキーフレームでまとめて制御できることがわかります。

このように@keyframes内にborder-bottomの目標値を記述するだけで、特別なJavaScriptを使わずに純粋なCSSだけでボーダーのアニメーションが実現できます。

  1. CSSのwidthプロパティをアニメーション化する方法

    CSSで要素の width（幅）プロパティをアニメーションさせるには、@keyframes ルールと animation プロパティを組み合わせて使用します。幅の変化を滑らかに表現することで、開閉パネルやホバーエフェクトなど、さまざまなインタラクティブな演出が可能になります。実装のポイント@keyframes 内で、アニメーションの途中経過（例：30%）における幅の値を指定します。animation プロパティで、キーフレーム名・再生時間などを設定します。幅は数値（px など）で指定するため、ブラウザは値の補間を行い滑らかなアニメーションを実現します。サンプルコード以下のコードでは、div要素

  2. CSSアニメーションでtransformプロパティをアニメーション化する方法

    CSSを使えば、transform プロパティにも簡単にアニメーションを適用できます。transform をアニメーション化することで、要素の回転・移動・拡大縮小などを滑らかで軽量な演出として表現可能です。ここでは、@keyframes と animation プロパティを組み合わせた基本的な実装方法を解説します。 実装のポイント @keyframes：アニメーションの進行度ごとに適用するスタイル（キーフレーム）を定義します。 animation：アニメーション名や再生時間（duration）などをまとめて指定できるショートハンドプロパティです。 transform：キーフレーム内で rot