transition、translate、transform、animationの違い

transition／translate／transform／animation

自分がcss 3アニメーションに触れ始めたばかりの頃はドキュメントをよく見ていなかったので、これらの「属性」を混同することが多い(この問題が全く存在しない場合は無視できる)1、まず明確にしなければならないのはtransition、transform、animationの3つがcss属性であり、translateは2 D変換の1つの方法はtransformの1つの属性値2、transformは2 D、3 D変換の属性であるが、彼がtransitionと同時に使用することが多いため直感的にアニメーション(遷移)transformですが、transformはアニメーション(トランジション)で使用できる属性の1つです.height、opacityのように(アニメーションでheightを直接使用せずにtransformをよく使うのは、transformを使用するとページの並べ替えが起こらず、パフォーマンスが向上するためです)3、transition、animationがアニメーション(トランジション)に必須の2つの属性です

animationとtransitionの違い

1、transitionの方が単純な状態への移行に適している2、animationはトリガ条件がなくてもtransitionはできないので、例えばページがロードされたばかりのときのアニメーションはanimation 3、animationはキーフレーム数、速度曲線、再生回数、逆再生の有無など、より複雑なアニメーション効果をより多くのパラメータで実現できる(公式紹介ではanimationはtransition属性の拡張である)

/* animation-test */
@keyframes myfirst
{
    from {background: green;}
    to {background: yellow;}
}
.animation-test{
    width: 200px;
    height: 200px;
    background: green;
}
.animation-test:hover{
    animation: myfirst 1s;
}
/* transition-test */
.transition-test {
    width: 200px;
    height: 200px;
    background: green;
    transition: background 1s;
}
.transition-test:hover {
    background: yellow;
}