| Class | Description |
|---|---|
| BounceInDownTransition |
Animate a bounce in down big effect on a node
Port of BounceInDownBig from Animate.css http://daneden.me/animate by Dan Eden
@keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
|
| BounceInLeftTransition |
Animate a bounce in left big effect on a node
Port of BounceInLeftBig from Animate.css http://daneden.me/animate by Dan Eden
@keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
}
}
|
| BounceInRightTransition |
Animate a bounce in right big effect on a node
Port of BounceInRightBig from Animate.css http://daneden.me/animate by Dan Eden
@keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
}
}
|
| BounceInTransition |
Animate a bounce in effect on a node
Port of BounceIn from Animate.css http://daneden.me/animate by Dan Eden
@keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
|
| BounceInUpTransition |
Animate a bounce in up big effect on a node
Port of BounceInUpBig from Animate.css http://daneden.me/animate by Dan Eden
@bounceInUp {
0% {
opacity: 0;
transform: translateY(2000px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
|
| BounceOutDownTransition |
Animate a bounce out down big effect on a node
Port of BounceOutDownBig from Animate.css http://daneden.me/animate by Dan Eden
@keyframes bounceOutDown {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(-20px);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
|
| BounceOutLeftTransition |
Animate a bounce out left big effect on a node
Port of BounceOutLeftBig from Animate.css http://daneden.me/animate by Dan Eden
@keyframes bounceOutLeft {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(20px);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
|
| BounceOutRightTransition |
Animate a bounce out right big effect on a node
Port of BounceOutRightBig from Animate.css http://daneden.me/animate by Dan Eden
@keyframes bounceOutRight {
0% {
-o-transform: translateX(0);
}
20% {
opacity: 1;
-o-transform: translateX(-20px);
}
100% {
opacity: 0;
-o-transform: translateX(2000px);
}
}
|
| BounceOutTransition |
Animate a bounce out effect on a node
Port of BounceOut from Animate.css http://daneden.me/animate by Dan Eden
@keyframes bounceOut {
0% {
transform: scale(1);
}
25% {
transform: scale(.95);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(.3);
}
}
|
| BounceOutUpTransition |
Animate a bounce out up big effect on a node
Port of BounceOutUpBig from Animate.css http://daneden.me/animate by Dan Eden
@bounceOutUp {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(20px);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
|
| BounceTransition |
Animate a bounce effect on the given node
Port of Bounce from Animate.css http://daneden.me/animate by Dan Eden
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
|
| CachedTimelineTransition |
A Transition that uses a Timeline internally and turns SPEED caching on for
the animated node during the animation.
|
| FadeInDownBigTransition |
Animate a fade in down big effect on a node
Port of FadeInDownBig from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeInDownBig {
0% {
opacity: 0;
transform: translateY(-2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
|
| FadeInDownTransition |
Animate a fade in down effect on a node
Port of FadeInDown from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
|
| FadeInLeftBigTransition |
Animate a fade in left big effect on a node
Port of FadeInLeftBig from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeInLeftBig {
0% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
|
| FadeInLeftTransition |
Animate a fade in left effect on a node
Port of FadeInLeft from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
|
| FadeInRightBigTransition |
Animate a fade in right big effect on a node
Port of FadeInRightBig from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeInRightBig {
0% {
opacity: 0;
transform: translateX(2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
|
| FadeInRightTransition |
Animate a fade in right effect on a node
Port of FadeInRight from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
|
| FadeInTransition |
Animate a fade in effect on a node
Port of FadeIn from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
|
| FadeInUpBigTransition |
Animate a fade in up big effect on a node
Port of FadeInUpBig from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeInUpBig {
0% {
opacity: 0;
transform: translateY(2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
|
| FadeInUpTransition |
Animate a fade in up effect on a node
Port of FadeInUp from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
|
| FadeOutDownBigTransition |
Animate a fade out up big effect on a node
Port of FadeOutDownBig from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeOutDownBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
|
| FadeOutDownTransition |
Animate a fade out Down effect on a node
Port of FadeInDown from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
|
| FadeOutLeftBigTransition |
Animate a fade out left big effect on a node
Port of FadeOutLeftBig from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeOutLeftBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
|
| FadeOutLeftTransition |
Animate a fade out left effect on a node
Port of FadeOutLeft from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeOutLeft {
0% {
opacity: 0;
transform: translateX(0);
}
100% {
opacity: 1;
transform: translateX(-20px);
}
}
|
| FadeOutRightBigTransition |
Animate a fade out right big effect on a node
Port of FadeOutRightBig from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeOutRightBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(2000px);
}
}
|
| FadeOutRightTransition |
Animate a fade out right effect on a node
Port of FadeOutRight from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeOutRight {
0% {
opacity: 0;
transform: translateX(0);
}
100% {
opacity: 1;
transform: translateX(20px);
}
}
|
| FadeOutTransition |
Animate a fade out effect on a node
Port of FadeOut from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
|
| FadeOutUpBigTransition |
Animate a fade out up big effect on a node
Port of FadeOutUpBig from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeOutUpBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
|
| FadeOutUpTransition |
Animate a fade in Out effect on a node
Port of FadeInOut from Animate.css http://daneden.me/animate by Dan Eden
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
|
| FlashTransition |
Animate a flash effect on a node
Port of Flash from Animate.css http://daneden.me/animate by Dan Eden
@keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
|
| FlipInXTransition |
Animate a flip in x effect on the given node
Port of FlipInX from Animate.css http://daneden.me/animate by Dan Eden
@keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateX(-10deg);
}
70% {
transform: perspective(400px) rotateX(10deg);
}
100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
|
| FlipInYTransition |
Animate a flip in y effect on the given node
Port of FlipInY from Animate.css http://daneden.me/animate by Dan Eden
@keyframes flipInY {
0% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateY(-10deg);
}
70% {
transform: perspective(400px) rotateY(10deg);
}
100% {
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
|
| FlipOutXTransition |
Animate a flip out x effect on the given node
Port of FlipOutX from Animate.css http://daneden.me/animate by Dan Eden
@keyframes flipOutX {
0% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
|
| FlipOutYTransition |
Animate a flip out y effect on the given node
Port of FlipOutY from Animate.css http://daneden.me/animate by Dan Eden
@keyframes flipOutY {
0% {
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
|
| FlipTransition |
Animate a flip effect on the given node
Port of Flip from Animate.css http://daneden.me/animate by Dan Eden
@keyframes flip {
0% {
transform: perspective(400px) rotateY(0);
animation-timing-function: ease-out;
}
40% {
transform: perspective(400px) translateZ(150px) rotateY(170deg);
animation-timing-function: ease-out;
}
50% {
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
animation-timing-function: ease-in;
}
80% {
transform: perspective(400px) rotateY(360deg) scale(.95);
animation-timing-function: ease-in;
}
100% {
transform: perspective(400px) scale(1);
animation-timing-function: ease-in;
}
}
|
| HingeTransition |
Animate a hinge effect on a node
Port of Hinge from Animate.css http://daneden.me/animate by Dan Eden
@keyframes hinge {
0% {
transform: rotate(0);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
20%, 60% {
transform: rotate(80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(60deg)
translateY(0);
opacity: 1;
transform-origin: top left;
animation-timing-function: ease-in-out;
}
100% {
transform: translateY(700px);
opacity: 0;
}
}
|
| PulseTransition |
Animate a pulse effect on the given node
Port of Pulse from Animate.css http://daneden.me/animate by Dan Eden
@@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
|
| RollInTransition |
Animate a roll in left effect on a node
Port of RollIn from Animate.css http://daneden.me/animate by Dan Eden
Which was originally authored by Nick Pettit - https://github.com/nickpettit/glide
@keyframes rollIn {
0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}
|
| RollOutTransition |
Animate a roll out right effect on a node
Port of RollOut from Animate.css http://daneden.me/animate by Dan Eden
Which was originally authored by Nick Pettit - https://github.com/nickpettit/glide
@keyframes rollOut {
0% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
transform: translateX(100%) rotate(120deg);
}
}
|
| RotateInDownLeftTransition |
Animate a rotate in down left effect on a node
Port of RotateInDownLeft from Animate.css http://daneden.me/animate by Dan Eden
@keyframes rotateInDownLeft {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
|
| RotateInDownRightTransition |
Animate a rotate in down right effect on a node
Port of RotateInDownRight from Animate.css http://daneden.me/animate by Dan Eden
@keyframes rotateInDownRight {
0% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
|
| RotateInTransition |
Animate a rotate in effect on a node
Port of RotateIn from Animate.css http://daneden.me/animate by Dan Eden
@keyframes rotateIn {
0% {
transform-origin: center center;
transform: rotate(-200deg);
opacity: 0;
}=
100% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
}
|
| RotateInUpLeftTransition |
Animate a rotate in up left effect on a node
Port of RotateInUpLeft from Animate.css http://daneden.me/animate by Dan Eden
@keyframes rotateInUpLeft {
0% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
|
| RotateInUpRightTransition |
Animate a rotate in up right effect on a node
Port of RotateInUpRight from Animate.css http://daneden.me/animate by Dan Eden
@keyframes rotateInUpRight {
0% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
|
| RotateOutDownLeftTransition |
Animate a rotate out down left effect on a node
Port of RotateOutDownLeft from Animate.css http://daneden.me/animate by Dan Eden
@keyframes rotateOutDownLeft {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
}
|
| RotateOutDownRightTransition |
Animate a rotate out down right effect on a node
Port of RotateOutDownRight from Animate.css http://daneden.me/animate by Dan Eden
@keyframes rotateOutDownRight {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
|
| RotateOutTransition |
Animate a rotate out effect on a node
Port of RotateOut from Animate.css http://daneden.me/animate by Dan Eden
@keyframes rotateOut {
0% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: center center;
transform: rotate(200deg);
opacity: 0;
}
}
|
| RotateOutUpLeftTransition |
Animate a rotate out up left effect on a node
Port of RotateOutUpLeft from Animate.css http://daneden.me/animate by Dan Eden
@keyframes rotateOutUpLeft {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
|
| RotateOutUpRightTransition |
Animate a rotate out up right effect on a node
Port of RotateOutUpRight from Animate.css http://daneden.me/animate by Dan Eden
@keyframes rotateOutUpRight {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
}
|
| ShakeTransition |
Animate a shake effect on the given node
Port of Shake from Animate.css http://daneden.me/animate by Dan Eden
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}
|
| SwingTransition |
Animate a swing effect on the given node
Port of Swing from Animate.css http://daneden.me/animate by Dan Eden
@keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
|
| TadaTransition |
Animate a wobble effect on the given node
Port of Shake from Animate.css http://daneden.me/animate by Dan Eden
@keyframes tada {
0% {transform: scale(1);}
10%, 20% {transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
100% {transform: scale(1) rotate(0);}
}
|
| WobbleTransition |
Animate a wobble effect on the given node
Port of Wobble from Animate.css http://daneden.me/animate by Dan Eden
which was originally authored by Nick Pettit - https://github.com/nickpettit/glide
@keyframes wobble {
0% { transform: translateX(0%); }
15% { transform: translateX(-25%) rotate(-5deg); }
30% { transform: translateX(20%) rotate(3deg); }
45% { transform: translateX(-15%) rotate(-3deg); }
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
100% { transform: translateX(0%); }
}
|