2018年02月26日(月)
CSS変数でイージングアニメーションを管理
Result
See the Pen LQgZBv by kachibito (@kachibito) on CodePen.
カスタムプロパティで:rootに作ったイージングをvar()関数で呼び出せるようにしますcss
:root {/*変数*/ --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out-cubic: cubic-bezi...
author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
ウェアラブルIoTメーカーのミツフジがForbes JAPAN「スモールジャイアンツ・アワード」において「大賞」及び「カッティングエッジ賞」を受賞
NEXT ›
民泊撤退するホストの受け皿に!スペースマーケットとファミリアリンクが時間貸しで業務提携を開始
関連記事
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『CSS変数でイージングアニメーションを管理』についてまとめています。
この記事は特にレスポンシブ・javascript・アニメーション・CSS3について書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。