CSS 3 トランジションを使用してアニメーション効果を実現する_html/css_WEB-ITnose

CSS 3 トランジションを使用してアニメーション効果テクノロジーを実現します

おそらくはい 公開日 2015-05-12 23:52

CSS3 の新機能トランジションを使用すると、簡単に次のことができますJQuery の animate メソッドには同じアニメーション効果がありますが、残念ながら、transition は 1 つの属性のみをサポートし、後続の属性を繰り返し定義すると前の属性が上書きされます。

Transition には 4 つのパラメータがあります。transition-property (トランジション効果を設定する CSS プロパティの名前を指定します)、transition-duration (トランジション効果が完了するまでにかかる秒数またはミリ秒数を指定します)、transition です。 -timing-function (速度効果の速度曲線を指定します)、transition-lay (フィルタリング効果を開始するまでの遅延時間)

以下の例では、マウスの後のアニメーション効果を見てください。赤い領域上のホバーは CSS で完全に実装されています。はい、マウス ホバーが動き始めるまでに 1 秒かかります。ピンクの領域全体のコンテンツを表示するには、マウス ホバーを使用してください。

^_^、自分を空気のように扱う人に固執するのは本当に難しいことがわかりました。この世に不可能なことは何もありません。鍵となるのは粘り強さです。私と同じように、好きな男の子が私を何も考えていないことを知っていましたが、それでも彼に毎日おはよう、おはよう、おやすみとテキストメッセージを送り続け、1か月間それを続けましたが、ついに使い果たしました。毎月使えるSMSパッケージがなくなってしまいました。

上記の効果を実現するための重要な CSS3 コードは次のとおりです:

<style>div#transition_animate_div{    height: 50px;    overflow: hidden;    background: pink;    line-height: 50px;    transition: height 2s ease-in-out 1s;    -moz-transition: height 2s ease-in-out 1s; /* Firefox 4 */    -webkit-transition: height 2s ease-in-out 1s; /* Safari and Chrome */    -o-transition: height 2s ease-in-out 1s; /* Opera */}div#transition_animate_div:hover{    height: 200px;}</style>

読む (264) コメント (0) コメントを見る