独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック! CSSのtransformプロパティはtranslate()やrotate()を1つの値として受け取るプロパティでした。そのため、同時にそれらを動かしたい場合、1つのプロパティに両方の記述が必要でした。これは記述の複雑化を生みます。 最新のCSSではtranslate、rotate、scaleをプロパティとして独立して指定できるようになりました。これにより複雑な記述をせずとも別々のタイムラインの指定やイージングの指定など柔軟なアニメーション表現が可能になりました。本記事では独立した特長とそれらを活かしたアニメーション表現を紹介します。 サンプルを別ウインドウで開く コードを確認する 独立したtranslate、rotate、scaleプロパティ 独立した各プロパティについて
![独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック! - ICS MEDIA](https://cdn-ak-scissors.b.st-hatena.com/image/square/0f48455fc352784e2177771ec6fa4f418459f0da/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F230309%2Fimages%2Feyecatch.png)