ホームページ > 記事 > ウェブフロントエンド > CSS3でアニメーションを実装する2つの方法は何ですか
#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。 1. 次のように、transition を使用してトランジションを設定し、transform を追加して形状を設定し、アニメーション効果を形成します:css3 でアニメーションを実装するには、次の 2 つの方法があります: 1. トランジション属性とトランスフォーム属性を使用してそれぞれトランジションと形状を設定する; 2. アニメーション属性のアニメーションを使用してアニメーション効果を設定する。
.divadd { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; transform:rotate(360deg); -ms-transform:rotate(360deg); /* IE 9 */ -webkit-transform:rotate(360deg); /* Safari and Chrome */ }ただし、この方法は比較的ニッチであり、制御が困難です。 2. アニメーション属性を追加し、次のようにアニメーション効果を設定します:
.a1 { position: absolute; animation: a1 3s; opacity: 0 } @keyframes a1 { 0% {left: 10px;opacity: 0} 30% {left: 60px;background-color: pink;font-size:23px;opacity: 1} 90% {left: 100px;background-color: red;opacity: 1} 100% {left: 10px;opacity: 0} }上記のパーセンテージの後の角括弧内に、transform rateto や left などのさまざまな属性値を追加できます。 。 。 。 。 。 。左上などの位置を追加する場合は絶対位置を設定することを忘れないでください。 (学習ビデオ共有:
css ビデオ チュートリアル)
すべての属性は次のとおりです:animation-name: myfirst; //动画名称,用于animation引用 animation-duration: 5s; //动画时长, animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running;
以上がCSS3でアニメーションを実装する2つの方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。