Usage

Description: Predefined animations can be declared in the animation Object using the preset key with a String value that corresponds to the preset list below.

Edit
ctr('.test', {
width: 200px
animation: {
// animate preset
preset: 'bounce'
}
})
.test:
width: 200px
animation:
# animate preset
preset: bounce
.test {
width: 200px;
animation-delay: 0s;
animation-duration: 1s;
animation-name: bounce;
animation-fill-mode: both;
animation-direction: normal;
animation-iteration-count: 1;
animation-play-state: running;
transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes bounce {
from, 20%, 53%, 80%, to {
transform: translate3d(0, 0, 0);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
40%, 43% {
transform: translate3d(0, -30px, 0);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
70% {
transform: translate3d(0, -15px, 0);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
ctr('.test', {
  width: 200px
  animation: {
    // animate preset
    preset: 'bounce'
  }
})
.test {
  width: 200px;
  animation-delay: 0s;
  animation-duration: 1s;
  animation-name: bounce;
  animation-fill-mode: both;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  transform-origin: center bottom;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    transform: translate3d(0, 0, 0);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  40%, 43% {
    transform: translate3d(0, -30px, 0);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  }
  70% {
    transform: translate3d(0, -15px, 0);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
.test:
  width: 200px
  animation:
    # animate preset
    preset: bounce

Notes

Preset List

bounce bounceIn bounceInDown bounceInLeft bounceInRight
bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight
bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig
fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig
fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flip
flipInX flipInY flipOutX flipOutY headShake
hinge jello lightSpeedIn lightSpeedOut pulse
rollIn rollOut rotateIn rotateInDownLeft rotateInDownRight
rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight rubberBand shake slideInDown
slideInLeft slideInRight slideInUp slideOutDown slideOutLeft
slideOutRight slideOutUp swing tada wobble
zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp
zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp

Modify

Description: Any preset option or timeline can be altered or extended.

Edit
// override default option
ctr('.override', {
width: 200px
animation: {
option: {
delay: 10s
duration: 10s
ease: 'ease-in'
}
preset: 'bounceIn'
}
})
# override default option
.override:
width: 200px
animation:
option:
delay: 10s
duration: 10s
ease: ease-in
preset: bounceIn
.override {
width: 200px;
animation-delay: 10s;
animation-duration: 10s;
animation-name: bounceIn;
animation-fill-mode: both;
animation-direction: normal;
animation-iteration-count: 1;
animation-play-state: running;
animation-timing-function: ease-in;
}
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
// override default option
ctr('.override', {
  width: 200px
  animation: {
    option: {
      delay: 10s
      duration: 10s
      ease: 'ease-in'
    }
    preset: 'bounceIn'
  }
})
.override {
  width: 200px;
  animation-delay: 10s;
  animation-duration: 10s;
  animation-name: bounceIn;
  animation-fill-mode: both;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-timing-function: ease-in;
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
# override default option
.override:
  width: 200px
  animation:
    option:
      delay: 10s
      duration: 10s
      ease: ease-in
    preset: bounceIn

Notes