Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿


【css】timing-function "Cubic-Bezier"

CSS Transitions [WD] -2013.11.29

 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);









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

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 Thanks!
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️