Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
41 lines (36 sloc) 1.58 KB
title: Easing Functions Cheat Sheet
description: Make animation more realistic by picking right easing function.
font:
name: PT Sans
url: family=PT+Sans:400,700&subset=latin
about: !!format
~Easing function~ specifies the speed of animation progresses
to make it more realistic.
The real object doesn’t begin its movement instantly and at a constant rate.
When we open the drawer, we first give it acceleration, and then we slow
it down. When something falls, it first goes down faster and faster, and then
bounces back after it hits the floor.
This page will each time help to pick the desired easing function.
howtos:
name: easing name
desc: easing description
js: !!format
jQuery with jQuery Easing Plugin is the easiest way to describe animation
with easing. You need just set easing name to `.animate` method as
third argument or `easing` key.
sass: !!format
Sass/SCSS help you to describe animation. Compass remove prefixes before
`transition` and `animation` properties and Compass Ceaser plugin allow
to set easing by it name (without Bezier curves).
css: !!format
CSS properties `transition` and `animation` allow you to set easing
function. Unfortunately, them support not all easings and you must set
function by Bezier curve.
css_help:
Select easing to show it description in Bezier curve.
no_css: !!format
Unfortunately, CSS doesn’t support this easing. But you can use it by
JavaScript or special CSS Animation `@keyframes`.
opensource:
title: open source
translate: Help us to translate site to your language
Something went wrong with that request. Please try again.