【24日目】CSSでクリスマスツリーを倒してみたかった【ぱちお Advent Calendar 2020】

おはおはの民！
ぱちお Advent Calendar 2020　の24日目の記事です。
23日目は・・・・おや不在ですね・・・・（（

adventar.org

CSSアニメーション、一回も使ったことない

使おう、ちょうどクリスマスだし

↓できたもの

そのためのクリスマスツリー https://t.co/CXDYjEbhEc #そのためのクリスマスツリー pic.twitter.com/Aafb12BpQk
— ぱちお (@patioglass) 2020年12月24日

クリックするとクリスマスツリーが倒れるWebです
github.com

cssアニメーション、単純ものは結構簡単で、animation→keyframesに渡すみたいな感じで書ける。
developer.mozilla.org

自分がアニメーションに関してはJQeury時代の人間だったので、はぇ～～～って感じです。
Webをつくるときに「ふわっと出てくる要素」を作ろうとしたとき、前はjs側でstyleのopacityを変化させていく・・・・とかだったんですけど
これだったらクラス付与するだけで、あとはcssって感じもできるからいいですね

ただ横スクロールkeyframes中に途中でrotate、とかの別keyframesを付与しようとしたとき、競合しちゃうので

<div class="rotate"><div class="move"></div></div>

回すようの親要素、動くようの子要素という風に分けると、発火タイミングをずらした複数アニメーションはできるみたい。
ただrotateの中心角にあたる「transform-origin」の位置が動く前の初期位置で計算されてしまうのはなんとかできないのか調べましたがわからんかったです（動いている途中に回転、がその場で回転ではなく動く前の初期位置が基点で回転する）

.fallDown {
    animation: fall-down 1s ease-in-out 0s 1 normal forwards;
}

@keyframes fall-down {
    70% {
        transform: rotate(0deg);
        transform-origin: center bottom;

    }
    80% {
        transform: rotate(90deg);
        transform-origin: center bottom;
    }
    85% {
        transform: rotate(75deg);
        transform-origin: center bottom;
    }
    90% {
        transform: rotate(95deg);
        transform-origin: center bottom;
    }
    95% {
        transform: rotate(85deg);
        transform-origin: center bottom;
    }
    100% {
        transform: rotate(90deg);
        transform-origin: center bottom;
    }
}