Previewer: Easing

Previewer for CSS easing functions.

How to use

You don't need to do anything. With this plugin loaded, a previewer will appear on hovering the easing values in code blocks.

This plugin is compatible with CSS, Less, Sass, Scss and Stylus.

Examples

CSS

div {
	transition: color 0.3s linear;
}

Less

@easing: cubic-bezier(0.1,0.3,1,.4);
#header a {
	transition-timing-function: ease;
}

Sass

$easing: ease-out
.foo
	transition: color 0.3s ease-in-out

Scss

$easing: linear;
$attr: background;
.foo {
    transition: #{$attr}-color 0.3s cubic-bezier(0.9,0.1,.2,.4);
}

Stylus

easing = ease-in
.foo
	transition: color 0.3s ease-out