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

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

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

実装例

以下のコードは、border-bottom-right-radiusプロパティにアニメーションを適用する例です。3秒間のアニメーションが無限に繰り返され、右下の角丸が150pxから50pxへと変化します。

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 500px;
        height: 400px;
        background: yellow;
        border: 10px solid yellow;
        border-bottom-right-radius: 150px;
        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;
        }
      }
    </style>
  </head>
  <body>
    <h2>右下の角丸（border-bottom-right-radius）のアニメーション</h2>
    <div></div>
  </body>
</html>

コードのポイント

  • 初期状態： div要素にはborder-bottom-right-radius: 150px;が設定されており、右下が大きく丸まった角になっています。
  • アニメーションの定義： @keyframes myanim内の20%の時点で、角丸が50pxに変化します。同時に背景色やボーダー色も変化するため、動きが分かりやすくなっています。
  • 無限ループ： animation: myanim 3s infinite;により、3秒周期でアニメーションが繰り返されます。

このように、border-radius系のプロパティはアニメーション可能（animatable）なため、角の丸みを時間的に変化させる演出が簡単に実装できます。カード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まで変化します