Usage¶

Description: Predefined easing functions can be used with the ease option property with a String value that corresponds to the preset list below.

ctr('.test', {
  width: 200px
  transition: {
    option: {
      ease: 'easeInBack'
    }
    opacity: 1
  }
})

.test:
  width: 200px
  transition:
    option:
      ease: easeInBack
    opacity: 1

.test {
  opacity: 1;
  width: 200px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

ctr('.test', {
  width: 200px
  transition: {
    option: {
      ease: 'easeInBack'
    }
    opacity: 1
  }
})

.test {
  opacity: 1;
  width: 200px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.test:
  width: 200px
  transition:
    option:
      ease: easeInBack
    opacity: 1

Notes

• You can use the presets in shorthand as well
• Attribution: easings.net
  • Creator, Andrey Sitnik (ai), is a must know name in the world of CSS — ever heard of PostCSS or Autoprefixer — yup that’s Andrey

Preset List

easeInBack	easeInCirc	easeInCubic	easeInExpo
easeInOutBack	easeInOutCirc	easeInOutCubic	easeInOutExpo
easeInOutQuad	easeInOutQuart	easeInOutQuint	easeInOutSine
easeInQuad	easeInQuart	easeInQuint	easeInSine
easeOutBack	easeOutCirc	easeOutCubic	easeOutExpo
easeOutQuad	easeOutQuart	easeOutQuint	easeOutSine