CSS3の基本的な変換と遷移animation_html/css_WEB-ITnose

理論的知識はしっかりしたものではありませんが、問題解決能力をある程度反映することができます。今日は CSS3 アニメーションを例として取り上げ、日常のアプリケーションでよく使用するその基本的なプロパティのいくつかを簡単に思い出します。

よく使用されるアニメーション属性:

transform:translate(x,y);//移動、x は前方への移動距離を表し、y は下方への移動距離を表します。

transform:scale(x,y);// スケール、x は水平方向のズーム率を表し、y は垂直方向のズーム率を表します。 ,y); //Tilt, xy は、それぞれ x 軸と y 軸に沿ったチルト アニメーションの遷移を表します。

transition-property は、要素が遷移する先の CSS プロパティをリストします。遷移可能なプロパティには、背景、境界線、およびボックス モデルのプロパティが含まれます。

transition-duration は、遷移の継続時間を設定します。

transition-timing-function は、遷移の速度を設定します。 、リニア、イーズイン、イーズアウト、イーズインアウトのいずれかを使用できます

transition-lay アニメーション遅延時間

省略形:

#selector{transition:transform 0.2s easy}

値の順序は次の順序である必要があります: 遷移-プロパティ 遷移-継続時間 遷移-関数 遷移-遅延

表示例:

CSS コード: CSS3 変換と遷移図の黄色の丸が遷移です緑色のボックス内の部分コードは、対応するアニメーションを 1 秒以内に完了するように設定されています。これは変換効果です。これは、マウスを h1 タイトルの上に移動すると、テキストが 2.5 倍に拡大されることを意味します。

要するに、アニメーションの基礎知識を習得することが非常に重要です。

転載元: http://www.aspnetjia.com/Cont-79.html