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

CSSでoutline-width（アウトラインの太さ）をアニメーションさせる方法

CSSでoutline-widthプロパティをアニメーションさせる

CSSでは、要素の輪郭線の太さを指定する outline-width プロパティにもアニメーションを適用できます。@keyframes ルールと組み合わせることで、アウトラインの太さを時間の経過とともに滑らかに変化させ、要素の輪郭が動的に強調される演出を実現できます。

ボタンやカードなどにホバー効果を加えたい場合や、注目させたい要素を視覚的に目立たせたい場合に活用できるテクニックです。以下のコードを実行して、outline-width のアニメーションを実際に確認してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 350px;
            height: 150px;
            outline: 2px solid yellow;
            animation: myanim 3s infinite;
         }
         @keyframes myanim {
            50% {
               outline-width: 10px;
            }
         }
      </style>
   </head>
   <body>
      <h1>CSS outline-width property</h1>
      <div></div>
   </body>
</html>

コードの解説

このサンプルでは、350×150px の div 要素に対して、初期状態で「2px・黄色・実線」のアウトラインを設定しています。

@keyframes myanim 内の 50% の時点で outline-width を 10px に変更するよう定義しており、animation: myanim 3s infinite; によって3秒周期でアウトラインの太さが「2px → 10px → 2px」と繰り返し変化します。

ポイント

  • @keyframes の中間地点を利用： 50%（または from / to）のキーフレームを指定することで、アウトラインの太さを段階的に変化させられます。
  • 無限ループ： infinite を指定するとアニメーションが繰り返されます。1回だけ再生したい場合は削除してください。
  • outline-style の指定が必要： アウトラインはデフォルトで表示されないため、solid や dashed などのスタイルを必ず設定しましょう。
  • レイアウトへの影響なし： アウトラインはボックスモデルに含まれないため、太さが変化しても周囲の要素の配置は崩れません。
  1. CSSのwidthプロパティをアニメーション化する方法

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

  2. CSSのoutline-widthプロパティとは？使い方を実例付きで解説

    outline-widthプロパティは、要素のボーダー（境界線）の外側に、指定した太さの輪郭線（アウトライン）を描くために使用します。borderプロパティと似ていますが、アウトラインは要素の寸法（幅・高さ）に含まれないという点が大きな違いです。そのため、レイアウトに影響を与えずに要素を強調したい場合に便利です。 構文（シンタックス） CSSのoutline-widthプロパティの基本構文は以下の通りです。 セレクタ {     outline-width: /*値*/ } ポイント： outline-widthを使用する前に、必ずoutline-sty