Usage

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

Edit
ctr('.test', {
width: 200px
hover: {
on: {
option: {
ease: 'easeInBack'
}
left: 0%
}
non: {
option: {
ease: 'easeInOutQuart'
}
left: 100%
}
}
})
.test:
width: 200px
hover:
on:
option:
ease: easeInBack
left: 0%
non:
option:
ease: easeInOutQuart
left: 100%
.test {
width: 200px;
}
.test:hover {
left: 0%;
transition-delay: 0s;
transition-property: left;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.test:not(:hover) {
left: 100%;
transition-delay: 0s;
transition-property: left;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
ctr('.test', {
  width: 200px
  hover: {
    on: {
      option: {
        ease: 'easeInBack'
      }
      left: 0%
    }
    non: {
      option: {
        ease: 'easeInOutQuart'
      }
      left: 100%
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  left: 0%;
  transition-delay: 0s;
  transition-property: left;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.test:not(:hover) {
  left: 100%;
  transition-delay: 0s;
  transition-property: left;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
.test:
  width: 200px
  hover:
    on:
      option:
        ease: easeInBack
      left: 0%
    non:
      option:
        ease: easeInOutQuart
      left: 100%

Notes

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