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
  animation: {
    name: 'easey-living'
    // ease preset
    ease: 'easeInOutQuart'
    timeline: {
      '50%': {
        color: red
      }
    }
  }
})

.test:
  width: 200px
  animation:
    name: easey-living
    # ease preset
    ease: easeInOutQuart
    timeline:
      50%:
        color: red

.test {
  width: 200px;
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-name: easey-living;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
@keyframes easey-living {
  50% {
    color: #f00;
  }
}

ctr('.test', {
  width: 200px
  animation: {
    name: 'easey-living'
    // ease preset
    ease: 'easeInOutQuart'
    timeline: {
      '50%': {
        color: red
      }
    }
  }
})

.test {
  width: 200px;
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-name: easey-living;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
@keyframes easey-living {
  50% {
    color: #f00;
  }
}

.test:
  width: 200px
  animation:
    name: easey-living
    # ease preset
    ease: easeInOutQuart
    timeline:
      50%:
        color: red

Notes

• You can use 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