Easing funkce definují úrověň změny parametru v čase.

Objekty reálného života nezrychlují a nezastavují okamžitě a téměř nikdy se nepohybují konstantní rychlostí. Když otevřeme šuplík, nejdříve se pohybuje rychle a jak se otevírá zpomaluje. Upusťe něco na zem a ono to nejprve bude zrychlovat dolů a po nárazu na zem se odrazí zpět nahoru.

Tato stránka vám pomůže vybrat správnou easing funkci.

linear

xt

css+js

  • easeInSine

  • easeOutSine

  • easeInOutSine

  • easeInQuad

  • easeOutQuad

  • easeInOutQuad

  • easeInCubic

  • easeOutCubic

  • easeInOutCubic

  • easeInQuart

  • easeOutQuart

  • easeInOutQuart

  • easeInQuint

  • easeOutQuint

  • easeInOutQuint

  • easeInExpo

  • easeOutExpo

  • easeInOutExpo

  • easeInCirc

  • easeOutCirc

  • easeInOutCirc

  • easeInBack

  • easeOutBack

  • easeInOutBack

js

  • easeInElastic

  • easeOutElastic

  • easeInOutElastic

  • easeInBounce

  • easeOutBounce

  • easeInOutBounce

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci. Naneštěstí nejsou podporovány všechny easing funkce, proto musíte požadovanou easing funkci definovat sami (jako Bezierovu křivku).

Pro zobrazení popisu Bezierovy křivky vyberte easing funkci.

div {
  -webkit-transition: all 600ms Bezierova křivka easing funkce;
  transition:         all 600ms Bezierova křivka easing funkce; }

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($jméno easing funkce)); }

JavaScript

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'jméno easing funkce', function () { … })
Všechny funkce easing

easeInSine

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
  transition:         all 600ms cubic-bezier(0.47, 0, 0.745, 0.715); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeInSine)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInSine', function () { … })
Všechny funkce easing

easeOutSine

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
  transition:         all 600ms cubic-bezier(0.39, 0.575, 0.565, 1); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeOutSine)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeOutSine', function () { … })
Všechny funkce easing

easeInOutSine

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition:         all 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeInOutSine)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutSine', function () { … })
Všechny funkce easing

easeInQuad

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition:         all 600ms cubic-bezier(0.55, 0.085, 0.68, 0.53); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeInQuad)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInQuad', function () { … })
Všechny funkce easing

easeOutQuad

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition:         all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeOutQuad)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeOutQuad', function () { … })
Všechny funkce easing

easeInOutQuad

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition:         all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeInOutQuad)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuad', function () { … })
Všechny funkce easing

easeInCubic

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition:         all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeInCubic)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInCubic', function () { … })
Všechny funkce easing

easeOutCubic

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition:         all 600ms cubic-bezier(0.215, 0.61, 0.355, 1); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeOutCubic)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeOutCubic', function () { … })
Všechny funkce easing

easeInOutCubic

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeInOutCubic)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutCubic', function () { … })
Všechny funkce easing

easeInQuart

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition:         all 600ms cubic-bezier(0.895, 0.03, 0.685, 0.22); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeInQuart)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInQuart', function () { … })
Všechny funkce easing

easeOutQuart

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition:         all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeOutQuart)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeOutQuart', function () { … })
Všechny funkce easing

easeInOutQuart

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
  transition:         all 600ms cubic-bezier(0.77, 0, 0.175, 1); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeInOutQuart)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuart', function () { … })
Všechny funkce easing

easeInQuint

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
  transition:         all 600ms cubic-bezier(0.755, 0.05, 0.855, 0.06); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeInQuint)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInQuint', function () { … })
Všechny funkce easing

easeOutQuint

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:         all 600ms cubic-bezier(0.23, 1, 0.32, 1); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeOutQuint)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeOutQuint', function () { … })
Všechny funkce easing

easeInOutQuint

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 600ms cubic-bezier(0.86, 0, 0.07, 1); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeInOutQuint)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuint', function () { … })
Všechny funkce easing

easeInExpo

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
  transition:         all 600ms cubic-bezier(0.95, 0.05, 0.795, 0.035); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeInExpo)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInExpo', function () { … })
Všechny funkce easing

easeOutExpo

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition:         all 600ms cubic-bezier(0.19, 1, 0.22, 1); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeOutExpo)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeOutExpo', function () { … })
Všechny funkce easing

easeInOutExpo

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(1, 0, 0, 1);
  transition:         all 600ms cubic-bezier(1, 0, 0, 1); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeInOutExpo)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutExpo', function () { … })
Všechny funkce easing

easeInCirc

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
  transition:         all 600ms cubic-bezier(0.6, 0.04, 0.98, 0.335); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeInCirc)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInCirc', function () { … })
Všechny funkce easing

easeOutCirc

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
  transition:         all 600ms cubic-bezier(0.075, 0.82, 0.165, 1); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeOutCirc)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeOutCirc', function () { … })
Všechny funkce easing

easeInOutCirc

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition:         all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeInOutCirc)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutCirc', function () { … })
Všechny funkce easing

easeInBack

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition:         all 600ms cubic-bezier(0.6, -0.28, 0.735, 0.045); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeInBack)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInBack', function () { … })
Všechny funkce easing

easeOutBack

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition:         all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeOutBack)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeOutBack', function () { … })
Všechny funkce easing

easeInOutBack

xt

CSS

CSS vlastnosti transition a animation vám umožní vybrat easing funkci.

div {
  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition:         all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }

Upravit na cubic-bezier.com.

SCSS

Také Sass/SCSS mohou definovat animace! Compass odstraňuje přepony vlastností transition a animation a Compass Ceaser plugin vám umožní zadat easing funkci dle jména (aniž byste museli přesně specifikovat Bezierovu křivku).

div {
  @include transition(all 600ms ceaser($easeInOutBack)); }

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutBack', function () { … })
Všechny funkce easing

easeInElastic

xt

CSS

V CSS není podporováno. Lze ovšem použít v JS nebo napsat pomocí CSS Animation @keyframes.

SCSS

V CSS není podporováno. Lze ovšem použít v JS nebo napsat pomocí CSS Animation @keyframes.

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInElastic', function () { … })
Všechny funkce easing

easeOutElastic

xt

CSS

V CSS není podporováno. Lze ovšem použít v JS nebo napsat pomocí CSS Animation @keyframes.

SCSS

V CSS není podporováno. Lze ovšem použít v JS nebo napsat pomocí CSS Animation @keyframes.

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeOutElastic', function () { … })
Všechny funkce easing

easeInOutElastic

xt

CSS

V CSS není podporováno. Lze ovšem použít v JS nebo napsat pomocí CSS Animation @keyframes.

SCSS

V CSS není podporováno. Lze ovšem použít v JS nebo napsat pomocí CSS Animation @keyframes.

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutElastic', function () { … })
Všechny funkce easing

easeInBounce

xt

CSS

V CSS není podporováno. Lze ovšem použít v JS nebo napsat pomocí CSS Animation @keyframes.

SCSS

V CSS není podporováno. Lze ovšem použít v JS nebo napsat pomocí CSS Animation @keyframes.

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInBounce', function () { … })
Všechny funkce easing

easeOutBounce

xt

CSS

V CSS není podporováno. Lze ovšem použít v JS nebo napsat pomocí CSS Animation @keyframes.

SCSS

V CSS není podporováno. Lze ovšem použít v JS nebo napsat pomocí CSS Animation @keyframes.

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeOutBounce', function () { … })
Všechny funkce easing

easeInOutBounce

xt

CSS

V CSS není podporováno. Lze ovšem použít v JS nebo napsat pomocí CSS Animation @keyframes.

SCSS

V CSS není podporováno. Lze ovšem použít v JS nebo napsat pomocí CSS Animation @keyframes.

jQuery

Nejsnažší cestou jak popsat animaci s easing efektem je jQuery s jQuery Easing Pluginem. Do metody .animate() zadejte jako třetí parametr jméno easing funkce (např. easeInCirc) nebo jej použijte jako hodnotu parametru easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutBounce', function () { … })
html
  meta charset="UTF-8"
  title= title
  script
open source
Pomozte přeložit stránku do vašeho jazyka.