css3でフォントの拡大・縮小アニメーションを実装する方法

実装方法: 1.「@keyframes」ルールと「transform:scale(scale);」ステートメントを使用してフォント拡大縮小アニメーションを作成; 2.「フォント要素{アニメーション:アニメーション名」を使用time unlimited;} ” ステートメントは、スケーリング アニメーションをフォント要素に適用します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS では、animation属性、「@keyframes」ルール、transform:scale()を使用してフォントを実現できます。増幅ズームアウトアニメーション

例:

     
  
欢迎来到PHP中文网
  

##手順:

animation(アニメーション属性)

@keyframes ルールは、属性値が時間の経過とともにどのように変化するかを記述する、カプセル化された CSS スタイル ルールのセットで構成されます。

@keyframes animation-name {keyframes-selector {css-styles;}}

keyframes-selector: アニメーションの割合を 0% から 100% の間で定義します。アニメーションには多くのセレクターを含めることができます。

• 次に、さまざまな CSS アニメーション プロパティを使用して、アニメーションの反復回数、開始値と終了値を交互に切り替えるかどうか、アニメーションなど、アニメーションのさまざまな側面を制御できます。実行するか一時停止するか。アニメーションによって開始時間が遅れることもあります。

@キーフレーム ルールは、キーワード「@keyframe」、その後にアニメーションの名前を指定する識別子 (アニメーション名を使用して参照されます)、その後に一連のスタイル ルール (カーリーで区切られたもの) で構成されます。ブレース） 。次に、アニメーション名属性の値として識別子を使用して、アニメーションが要素に適用されます。

構文:

/* 定义动画*/ @keyframes 动画名称{ /* 样式规则*/ } /* 将它应用于元素 */ .element { animation-name: 动画名称（在@keyframes中已经声明好的）; /* 或使用动画简写属性*/ animation: 动画名称 1s ... }

中括弧内で、アニメーション中の特定の時点でアニメーション化されるプロパティの値を指定するキーフレームまたはウェイポイントを定義する必要があります。これにより、アニメーション シーケンスの中間ステップを制御できるようになります。

(学習ビデオ共有:

、

)

以上がcss3でフォントの拡大・縮小アニメーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。