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

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

flex-basisプロパティをアニメーションさせる

CSSでflex-basisプロパティをアニメーション化するには、@keyframesルールを使ってアニメーションを定義し、要素に適用します。flex-basisはフレックスアイテムの主軸方向の初期サイズを指定するプロパティで、この値を変化させることで、アイテムが伸び縮みするような滑らかなアニメーションを実現できます。

以下は、flex-basisプロパティにアニメーションを適用するサンプルコードです。実際にブラウザで実行して、動作を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
   .box {
      display: flex;
      background-color: green;
   }
   .box > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
      margin: 5px;
   }
   div {
      animation: myanim 4s infinite;
   }
   @-webkit-keyframes myanim {
      50% {
         flex-basis: 100px;
      }
   }
</style>
</head>
<body>
   <h1>Quiz</h1>
   <div class = "box">
      <div>Q1</div>
      <div>Q2</div>
      <div>Q3</div>
      <div style = "flex-basis: 350px">Q4</div>
      <div>Q5</div>
      <div>Q6</div>
      <div>Q7</div>
      <div>Q8</div>
      <div>Q9</div>
   </div>
</body>
</html>

コードの解説

.boxクラス： display: flex;を指定することで、コンテナがフレックスボックスとして機能し、子要素（Q1〜Q9）が横一列に並びます。

@keyframes myanim： アニメーションの途中（50%の時点）でflex-basis: 100px;を設定しています。これにより、各アイテムの幅がアニメーションしながら変化します。

animation: myanim 4s infinite; アニメーション名「myanim」を4秒間かけて再生し、infiniteによって無限に繰り返すよう指定しています。

インラインスタイル： Q4の要素にはstyle="flex-basis: 350px"が直接指定されており、他のアイテムよりも大きく表示されます。アニメーションの影響を受けつつ、初期値が大きいため目立つ動きになります。

このようにflex-basisをアニメーション化すると、フレックスレイアウト内でアイテムのサイズが動的に変化する視覚効果を作れます。ナビゲーションメニューやカードレイアウトなど、さまざまなUI演出に応用できるので、ぜひ試してみてください。

  1. CSS子セレクター（>）とは？使い方とサンプルコードで解説

    CSSの子セレクターは、特定の親要素の直下にある子要素だけを選択するために使用されるセレクターです。親要素と子要素の間に「>」（大なり記号）を挟んで指定することで、直接の子要素のみがスタイルの適用対象となり、孫要素以降の階層には影響しません。構文CSS子セレクターの基本構文は以下の通りです。element > element { /* 宣言 */ }使用例1次の例では、article要素の直下にあるdiv要素、およびdiv要素の直下にあるp要素に対してスタイルを適用しています。<!DOCTYPE html> <html> <head> <s

  2. CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法

    CSSのbackground-attachmentプロパティは、ページをスクロールした際に、背景画像がビューポート（ブラウザの表示領域）に対してどのように振る舞うかを指定するためのプロパティです。 このプロパティには、主に以下の3つの値を指定できます。 scroll：初期値。背景画像は要素に対して固定され、ページ全体のスクロールに合わせて移動します。 fixed：背景画像がビューポートに対して固定され、ページをスクロールしても背景は一切動きません。 local：背景画像が要素のコンテンツと共にスクロールします。要素自体にスクロール領域がある場合に特に有効です。 構文 CSSのbackgro