【 css animation 】アニメーションはpositionで始点を統一する

css animation を使って色々実装しています。

今回一つのプロジェクトが終了したので
とくに気をつけようと思ったこと記録していきます。

今回のアニメーションに一番欠かせなかったのが
transform: transition( x, y )でした。
現在の一から右にxだけ動かし、下にyだけ動かす
と言ったものです。

<div>
    <div class="anime1"></div>
    <div class="anime2"></div>
    <div class="anime3"></div>
</div>

上記の様に複数のdivにアニメーションを追加する場合は、
positionを指定して要素の元となる位置を統一させましょう。

そうしないと、下の要素のアニメーションが上の要素の高さに依存することになります。
デバイスによってheightが違ってたり、他の人がjsで高さを変更してしまうと
アニメーション全体に大幅なズレが生まれてしまいます。

See the Pen css animation by たまきこう (@ulqvhvox) on CodePen.

左が他の要素の高さに依存したアニメーション
右がposition:absoluteをつけて始点を統一したアニメーションです。

それぞれ一番上の要素がなんらかの理由で消えてしまった時、
左の場合だと、要素のheight分上にガクっとずれます。
右だと、一番上が消えても残りの二つはちゃんと動作します。

以上！ブログ久しぶり！

tamakipedia