Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

【css】timing-function "Cubic-Bezier"

CSS Transitions [WD] -2013.11.29

   https://www.w3.org/TR/css3-transitions/#transition-timing-function-property

 2.3. The ‘transition-timing-function’ Property

 

cubic-bezier(<number>, <number>, <number>, <number>)

Specifies a cubic-bezier curve. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid. The y values can exceed this range. 

 

これは誤解説されていたサイトもあった。

x → 0~1

y → 0~1 を超えうる( 2,-0.5 等の値もOKという事)

 

 

これの何が良いかというと。。

CSS で Bounce( 跳ね返りや揺れ) のアニメーション効果を使いたい時、@keyframes で細かく設定しなくて済む。

animation-timing-function: cubic-bezier(n,n,n,n);
transition-timing-function: cubic-bezier(n,n,n,n);

で、簡単に同じアニメーション効果が得られる。

 

 言葉より、見る方が分かりやすい↓

cubic-bezier.com

f:id:DDramonQ:20161016224510p:plain

 

 

 

 

ただ、Specification がWD段階だから、上手く表示されないブラウザもありそう。

Remove all ads
This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️