CSS / Style / transition

ある要素を(特定のセレクタで規定される)あるスタイル状態からあるスタイル状態へ切り替える際に連続的に変化させアニメーションさせる指定

#hoge.piyo{
    left: 0;
}
#hoge.fuga{
    left: 100px;
    transition: all 1s;
}

このようにして JS 等で対象の #hoge の class を脱着すると 100px 間を1秒で移動するようなアニメーションになる。

複雑な動きの制御をしないのならばこの transition と transform の組み合わせで現実的に大体のアニメーション表現は間に合うと思う。

css/style/transition.txt · 最終更新: 2021-12-01 09:48 by ore

文書の先頭へ