Easing functions 는 매개변수의 변화율을 시간이 지남에 따라 정합니다.

실제로 물체는 갑자기 움직이거나 멈추지 않습니다. 그리고, 대부분 일정한 속도로 움직이지도 않습니다. 예를 들어 서랍을 여는 동작을 취할 때, 처음에는 가속이 붙으며 점점 속력이 줄어드는 것을 느낄 수 있습니다. 또한 바닥에 무언가를 떨어뜨릴 때, 그것이 점점 빨리 내려가며 지면에 닿은 뒤 다시 튀어 오를 때에는 점점 느려지면서 올라오는 것을 확인 할 수 있습니다.

이 페이지는 상황에 맞는 easing function 을 고를 수 있도록 도움을 줍니다.

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 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다. 안타깝게도, CSS 는 아직 모든 easing 을 지원하지 않으며, Bezier curve 와 같은 easing function 을 직접 지정해야 합니다.

easing function 을 선택하여 Bezier curve 표기법을 볼 수 있습니다.

div {
  -webkit-transition: all 600ms easing’s Bezier curve;
  transition:         all 600ms easing’s Bezier curve; }

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

div {
  @include transition(all 600ms ceaser($easing 이름)); }

JavaScript

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easing 이름', function () { … })
모든 easing

easeInSine

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInSine', function () { … })
모든 easing

easeOutSine

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeOutSine', function () { … })
모든 easing

easeInOutSine

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInOutSine', function () { … })
모든 easing

easeInQuad

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInQuad', function () { … })
모든 easing

easeOutQuad

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeOutQuad', function () { … })
모든 easing

easeInOutQuad

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuad', function () { … })
모든 easing

easeInCubic

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInCubic', function () { … })
모든 easing

easeOutCubic

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeOutCubic', function () { … })
모든 easing

easeInOutCubic

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInOutCubic', function () { … })
모든 easing

easeInQuart

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInQuart', function () { … })
모든 easing

easeOutQuart

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeOutQuart', function () { … })
모든 easing

easeInOutQuart

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuart', function () { … })
모든 easing

easeInQuint

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInQuint', function () { … })
모든 easing

easeOutQuint

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeOutQuint', function () { … })
모든 easing

easeInOutQuint

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuint', function () { … })
모든 easing

easeInExpo

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInExpo', function () { … })
모든 easing

easeOutExpo

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeOutExpo', function () { … })
모든 easing

easeInOutExpo

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInOutExpo', function () { … })
모든 easing

easeInCirc

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInCirc', function () { … })
모든 easing

easeOutCirc

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeOutCirc', function () { … })
모든 easing

easeInOutCirc

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInOutCirc', function () { … })
모든 easing

easeInBack

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInBack', function () { … })
모든 easing

easeOutBack

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeOutBack', function () { … })
모든 easing

easeInOutBack

xt

CSS

CSS 의 transitionanimation 과 함께 easing function 을 사용할 수 있습니다.

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

cubic-bezier.com 에서 편집

SCSS

Sass/SCSS 도 애니메이션을 표현 해 낼 수 있습니다. Compass 를 사용하면, transitionanimation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

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

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInOutBack', function () { … })
모든 easing

easeInElastic

xt

CSS

CSS 는 지원하지 않습니다. 하지만, JS 를 사용하거나, CSS Animation @keyframes 로 작성할 수 있습니다.

SCSS

CSS 는 지원하지 않습니다. 하지만, JS 를 사용하거나, CSS Animation @keyframes 로 작성할 수 있습니다.

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInElastic', function () { … })
모든 easing

easeOutElastic

xt

CSS

CSS 는 지원하지 않습니다. 하지만, JS 를 사용하거나, CSS Animation @keyframes 로 작성할 수 있습니다.

SCSS

CSS 는 지원하지 않습니다. 하지만, JS 를 사용하거나, CSS Animation @keyframes 로 작성할 수 있습니다.

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeOutElastic', function () { … })
모든 easing

easeInOutElastic

xt

CSS

CSS 는 지원하지 않습니다. 하지만, JS 를 사용하거나, CSS Animation @keyframes 로 작성할 수 있습니다.

SCSS

CSS 는 지원하지 않습니다. 하지만, JS 를 사용하거나, CSS Animation @keyframes 로 작성할 수 있습니다.

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInOutElastic', function () { … })
모든 easing

easeInBounce

xt

CSS

CSS 는 지원하지 않습니다. 하지만, JS 를 사용하거나, CSS Animation @keyframes 로 작성할 수 있습니다.

SCSS

CSS 는 지원하지 않습니다. 하지만, JS 를 사용하거나, CSS Animation @keyframes 로 작성할 수 있습니다.

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInBounce', function () { … })
모든 easing

easeOutBounce

xt

CSS

CSS 는 지원하지 않습니다. 하지만, JS 를 사용하거나, CSS Animation @keyframes 로 작성할 수 있습니다.

SCSS

CSS 는 지원하지 않습니다. 하지만, JS 를 사용하거나, CSS Animation @keyframes 로 작성할 수 있습니다.

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeOutBounce', function () { … })
모든 easing

easeInOutBounce

xt

CSS

CSS 는 지원하지 않습니다. 하지만, JS 를 사용하거나, CSS Animation @keyframes 로 작성할 수 있습니다.

SCSS

CSS 는 지원하지 않습니다. 하지만, JS 를 사용하거나, CSS Animation @keyframes 로 작성할 수 있습니다.

jQuery

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 표현 해 낼 수 있습니다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 됩니다.

div.animate({ top: '-=100px' }, 600, 'easeInOutBounce', function () { … })
html
  meta charset="UTF-8"
  title= title
  script
오픈 소스
사이트를 번역해주세요