
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください
Twitterで共有ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

2023年10月9日CSS,アニメーションcubic-bezier() をやめてこれからは数式でCSS アニメーションを書いて...2023年10月9日CSS,アニメーションcubic-bezier() をやめてこれからは数式でCSS アニメーションを書いていこうと思います。cubic-bezier() には簡単にアニメーションのイージングを書けるというメリットがありますが、凝ったことをしようとすると表現力が足りない問題に直面します。例えば、ユーザーが直前に行った操作に応じてアニメーションに初速をかけたい時、CSS アニメーションでやるのは難しいので、JavaScript で実装するというのが一般的です。 しかし、最近のCSS では、アニメーションさせたいプロパティに数式を記述することで、初速を考慮したイージングを実現できます。以下のデモは初速を考慮したCSS アニメーションの実装です。(記事執筆時点で Firefox に未実装の機能を使用しているので、Firefox 以外のブラウザーで見てください) これを突き