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

CSSのborder-bottom-left-radiusプロパティを使ったアニメーションの実装方法

CSSでは、border-bottom-left-radiusプロパティにもアニメーションを適用できます。このプロパティは要素の左下角の丸みを制御するもので、@keyframesルールと組み合わせることで、角の形状が滑らかに変化するアニメーションを作成できます。

以下の例では、黄色い背景と緑のボーダーを持つdiv要素に対して、左下角の半径が150pxから50pxへと3秒周期で繰り返し変化するアニメーションを設定しています。

コード例

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 500px;
        height: 400px;
        background: yellow;
        border: 10px solid green;
        border-bottom-left-radius: 150px;
        animation: myanim 3s infinite;
        background-position: bottom left;
        background-size: 50px;
      }
      @keyframes myanim {
        20% {
          background-size: 90px;
          border-bottom-left-radius: 50px;
        }
      }
    </style>
  </head>
  <body>
    <h2>左下角の半径（border-bottom-left-radius）のアニメーション</h2>
    <div></div>
  </body>
</html>

コードのポイント

  • animationプロパティ：myanim 3s infiniteと指定することで、3秒間のアニメーションを無限に繰り返します。
  • @keyframesルール：アニメーションの進行度20%の時点でborder-bottom-left-radiusを50pxに変更し、角の丸みが動的に変化します。
  • background-sizeとの併用：背景サイズも同時にアニメーションさせることで、より視覚的に分かりやすい演出になっています。

このように、border-radius系のプロパティはCSSトランジションやキーフレームアニメーションの対象として利用できるため、ボタンやカードなどUI要素に柔らかい動きを加えたい場合に活用できます。

  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まで変化します