CSS3で左右に伸びるアニメーション効果を実現する方法

方法: 1. 「element {animation: name time}」ステートメントを使用して、アニメーションを要素にバインドします。 2. 「@keyframes name {50%{transform:scale(left and right scaling multiple, 1);} }" ステートメントで、要素の拡大と縮小のアニメーション アクションを設定し、要素の左右の拡大と縮小のアニメーション効果を実現します。

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

css3 で左右のスケーリング アニメーション効果を実現する方法

CSS で、左右のスケーリング アニメーションを実現したい場合、アニメーション属性を介してイメージ要素をバインドする必要があります。アニメーションを設定し、アニメーション時間を指定します。

キーフレーム ルールは、要素アニメーションのアクションを指定するために使用されます。特定のアクションは、要素をスケールするための変換属性とスケール関数に基づいています。

例は次のとおりです:

出力結果:

(学習ビデオ共有:css ビデオ チュートリアル)

以上がCSS3で左右に伸びるアニメーション効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。