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

CSSのborder-bottom-widthプロパティでアニメーションを実行する方法

CSSでは、border-bottom-widthプロパティにもアニメーションを適用することができます。このプロパティは要素の下側の境界線（ボーダー）の太さを制御するもので、@keyframesと組み合わせることで、下ボーダーの太さが滑らかに変化するアニメーションを作成できます。

実際に動作を確認したい場合は、以下のコードを実行してみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 500px;
            height: 300px;
            background: yellow;
            border: 10px solid yellow;
            border-bottom-right-radius: 100px;
            border-bottom-width: 30px;
            background-image: url('https://www.tutorialspoint.com/latest/electronic_measuring_instruments.png');
            animation: myanim 3s infinite;
            background-position: bottom left;
            background-size: 50px;
         }
         @keyframes myanim {
            20% {
               background-color: maroon;
               background-size: 90px;
               border-bottom-color: green;
               border-bottom-right-radius: 50px;
               border-bottom-width: 50px;
            }
         }
      </style>
   </head>
   <body>
      <h2>下ボーダーの太さに対してアニメーションを実行する</h2>
      <div></div>
   </body>
</html>

コードの解説

このサンプルコードのポイントは以下の通りです。

  • 初期状態では、border-bottom-width: 30px;によって下ボーダーの太さが30pxに設定されています。
  • @keyframes myanim内の20%の時点で、border-bottom-width: 50px;と指定することで、下ボーダーの太さが30pxから50pxへと変化します。
  • animation: myanim 3s infinite;により、3秒間のアニメーションが無限に繰り返されます。

あわせてborder-bottom-colorやborder-bottom-right-radiusも変化させているため、色や角丸の形状も同時にアニメーションする様子を確認できます。ブラウザでこのHTMLファイルを開くと、黄色い背景の要素の下ボーダーが緑色になりながら太さが変化し、背景画像のサイズも連動して拡大縮小するアニメーションが表示されます。

  1. CSSのperspectiveプロパティをアニメーションさせる方法を解説

    CSSのperspective（パースペクティブ）プロパティは、3D変換における奥行きの深さを定義するプロパティです。このプロパティにアニメーションを適用すると、視点の距離が変化することで、要素に動的な立体効果を与えることができます。perspectiveプロパティの基本perspectiveプロパティの値が小さいほど視点が要素に近づき、3D効果が強調されます。逆に値が大きいほど、遠くから見たような自然な奥行き表現になります。この値の変化を@keyframesで定義することで、アニメーションとして実装できます。実装例以下は、perspectiveプロパティにCSSアニメーションを適用するサンプ

  2. CSSのpadding-topプロパティでアニメーションを実行する方法

    CSSでは、padding-topプロパティもアニメーションの対象にすることができます。@keyframesルールの中でpadding-topの値を変化させることで、要素の上側の余白が滑らかに動くアニメーションを作成できます。実装のポイントアニメーションさせたい要素にanimationプロパティを設定します。@keyframes内で、進行度（例：30%）の時点でのpadding-topの値を指定します。アニメーション時間や繰り返し回数は自由に調整可能です。サンプルコード以下のコードでは、3秒間のアニメーションを無限に繰り返し、途中（30%の時点）でpadding-topが60pxまで変化します