タグ

2023年3月9日のブックマーク (1件)

  • 独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック! - ICS MEDIA

    独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック! CSSのtransformプロパティはtranslate()やrotate()を1つの値として受け取るプロパティでした。そのため、同時にそれらを動かしたい場合、1つのプロパティに両方の記述が必要でした。これは記述の複雑化を生みます。 最新のCSSではtranslate、rotate、scaleをプロパティとして独立して指定できるようになりました。これにより複雑な記述をせずとも別々のタイムラインの指定やイージングの指定など柔軟なアニメーション表現が可能になりました。記事では独立した特長とそれらを活かしたアニメーション表現を紹介します。 サンプルを別ウインドウで開く コードを確認する 独立したtranslate、rotate、scaleプロパティ 独立した各プロパティについて

    独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック! - ICS MEDIA