【CSSアニメーション】css-animationでcssプロパティが効かなかった問題

状況

webサイトでよく見る『スクロールすると要素が下からふんわり現れるあれ』を作りたくてcssアニメーションをさせたんだけど、思ったように移動してくれない。
コードこんな感じ。

div {
    opacity: 0;
}
.is-active {
    animation-name: scrolleffect;
    animation-duration: 2s;
}

@keyframes scrolleffect {
    form {
        opacity: 0;
        transform:translateY(-10px); /*動かない*/
    }
    to {
        opacity: 1;
        transform:translateY(0); /*動かない*/
    }
}

ちなみにこっちは動く↓

div {
    opacity: 0;
}
.is-active {
    animation-name: scrolleffect;
    animation-duration: 2s;
}

@keyframes scrolleffect {
    form {
        opacity: 0;
        transform:translateY(0); /*動く*/
    }
    to {
        opacity: 1;
        transform:translateY(-10px); /*動く*/
    }
}

数字が逆の時は動くとか意味わからん。
負の値がダメなのかと思ったけどそうゆうわけでもない。

こんな感じで詰まってたんですが、解決しました。

原因と解決方法

div{
    opacity: 0;
    transform:translateY(-10px); /*追加箇所*/
}
.is-active {
    animation-name: scrolleffect;
    animation-duration: 2s;
}

@keyframes scrolleffect {
    form {
        opacity: 0;
        transform:translateY(-10px);
    }
    to {
        opacity: 1;
        transform:translateY(0);
    }
}

原因は、始まりの値がkeyframes内のfromの値と異なっていたため。
そのためデフォルト値と同じtransform:translateY（0）から始まるものは動くのに、transform:translateY（-10px)から始まるものは動かなかったようです。
divにtransform:translateY(-10px)を設定してあげたら動くようになりました。

別にtransformじゃなくても起こり得ますね。
同僚も同じ経験をしたことがあると話していたので、割と陥りやすい罠かもしれません。