CSS3_html/css_WEB-ITnoseにおける変形・遷移・アニメーションの紹介と使用例

Transform は属性であり、本質的には width と height と同じです。

トランジションはトランジション エフェクトを制御するために使用されるアトリビュートです。これは、トランスフォームを使用するとトランスフォーム エフェクトが増加する可能性があり、そのトランスフォームは瞬時のミューテーションであるため、この変更をスムーズかつトランジショナルにしたい場合は、次のようにする必要があります。トランジションを制御するには、制御する属性とトランジション時間を設定するだけです。

アニメーションはアニメーション効果です。まず @keyframes を使用してアニメーション プロセスを定義し、次にクラス内のアニメーションのさまざまなパラメーターを使用して、必要なアニメーション名、実行時間、実行数などを指定する必要があります。たす。

/* 遷移を使用した浮動小数点 */

.float {

遷移プロパティ: 変換;

遷移期間: .3s;

.float:hover {

変換:translateY( -5px);

}

/* アニメーションを使用したパルス*/

@keyframes パルス {

25% {

スケール変換: (1.1);

}

75% { F s 変換: スケール (.9);

}}

} .pulse {}

.pulse: ホバー {

{: パルス;

タイミング - 関数: 線形; anime-iteration-count: 無限;

}

著作権表示: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。