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
- Attribution: animate.css — creator Daniel Eden
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
- Alterations are deep merged via _.defaultsDeep