CSS3トランジションとアニメーションの違いを紹介

CSS3 トランジション

CSS3 では、Flashアニメーション や JavaScript を使用せずに、あるスタイルから別のスタイルに遷移するときに特定の効果を追加できます。マウスを使用して次の要素の上に移動します。

つまり、要素の遷移を設定した後、要素 の 属性を突然変更すると、

が次の要素に含まれます。メソッドを使用すると、要素の幅が突然変更されると、2 秒後に変更した値になります

div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

CSS3 アニメーション

CSS3 では、多くの Web ページのアニメーション画像、Flash アニメーション、および JavaScript。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
  
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

Animationとはあらかじめ設定されたアニメーション処理であり、この処理に従ってCSS3が実行されます。

以上がCSS3トランジションとアニメーションの違いを紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。