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
오픈 소스
사이트를 번역해주세요