css3でアニメーションを簡単に実現するTransitions_html/css_WEB-ITnose

ソフトウェア開発において、Web フロントエンドで開発されるアニメーションは私たちにとって不可欠な特殊効果です。CSS3 が登場する以前は、ほとんどのアニメーションは JavaScript で実現でき、その手順は現在の CSS3 よりもはるかに複雑でした。良いフレームワークはたくさんありますが。 CSS3 でアニメーションを実装する方がはるかに簡単です。 CSS3 ではアニメーションを担当する人が 2 人います。1 人はトランジション、もう 1 人はアニメーションです。今日はトランジションの使い方について説明します。ここでのブラウザのサポートは普遍的ではありません。アニメーション効果が表示されない場合は、ブラウザが css3 をサポートしていないことを意味します

ここで効果を見てください。データが移動されると変化します

遷移: [ 遷移プロパティ ] || [ 遷移タイミング関数 ] || [遷移遅延 ]

[遷移プロパティ ]:

に参加するオブジェクトのプロパティを取得または設定しますトランジション
[transition -duration ]:
オブジェクトのトランジションの継続時間を取得または設定します
[transition-timing-function ]:
オブジェクト内のトランジションのアニメーション タイプを取得または設定します
[transition-delay ]:
取得またはオブジェクトの遅延遷移の


を設定します

以下はソースコードです

​​

gt;
g t;
gt;
gt;
< /div>