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

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

CSSで要素の width（幅）プロパティをアニメーションさせるには、@keyframes ルールと animation プロパティを組み合わせて使用します。幅の変化を滑らかに表現することで、開閉パネルやホバーエフェクトなど、さまざまなインタラクティブな演出が可能になります。

実装のポイント

  • @keyframes 内で、アニメーションの途中経過（例：30%）における幅の値を指定します。
  • animation プロパティで、キーフレーム名・再生時間などを設定します。
  • 幅は数値（px など）で指定するため、ブラウザは値の補間を行い滑らかなアニメーションを実現します。

サンプルコード

以下のコードでは、div要素の幅が300pxから500pxへと3秒かけてアニメーションします。

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 250px;
background-color: maroon;
color: white;
animation: myanim 3s;
}
@keyframes myanim {
30% {
width: 500px;
}
}
</style>
</head>
<body>
<h1>CSS width プロパティのデモ</h1>
<div>
<p>これはサンプルテキストです！</p>
</div>
</body>
</html>

コードの解説

この例では、@keyframes myanim の中で「30%」の時点に幅500pxを指定しています。これにより、アニメーション開始から約0.9秒後（全体時間3秒の30%）に要素の幅が500pxに達し、その後300pxへ戻るように動作します。背景色はマルーン（暗い赤）で、白文字の見出しが表示されるため、幅の変化が視覚的にわかりやすくなっています。

なお、width のアニメーションはレイアウトの再計算を伴うため、パフォーマンスが重要な場面ではGPU処理が可能な transform: scaleX() などの利用も検討すると良いでしょう。

  1. CSSでoutline-offsetプロパティをアニメーションさせる方法

    CSSのoutline-offsetプロパティは、要素の輪郭線（アウトライン）と要素の端との間隔を調整するためのプロパティです。正の値を指定するとアウトラインが外側へ移動し、負の値を指定すると内側へ移動します。このプロパティは数値ベースのため、@keyframesと組み合わせることで、アウトラインが浮き出たり引っ込んだりする滑らかなアニメーションを簡単に実装できます。 アニメーションの実装例 以下のコードでは、3秒周期でアウトラインが要素から離れ、また元に戻る動作を無限に繰り返します。実際にブラウザで実行して挙動を確認してみてください。 <!DOCTYPE html> <ht

  2. CSSのtext-decoration-colorプロパティで下線の色をアニメーションさせる方法

    CSSのtext-decoration-colorプロパティは、テキストに表示される下線・上線・取り消し線などの装飾線の色を個別に指定できるプロパティです。この値を@keyframesと組み合わせて変化させることで、下線の色が滑らかに移り変わるアニメーション効果を実現できます。 実装例：text-decoration-colorのアニメーション 以下のコードでは、青い背景のボックスを右へ移動させながら、同時に下線の色をオレンジ色へと変化させています。animationプロパティで「3秒間・無限ループ」の設定にしているため、アニメーションは繰り返し再生されます。 <!DOCTYPE htm