Last active
October 30, 2023 02:46
-
-
Save EvanMarie/82d11cba2efc2b446d0126538a6c8573 to your computer and use it in GitHub Desktop.
CSS Animations
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@keyframes slideDown { | |
from { | |
transform: translateY(-100%); | |
} | |
to { | |
transform: translateY(0); | |
} | |
} | |
@keyframes fadeInOut { | |
0% { | |
opacity: 0; | |
} | |
50% { | |
opacity: 1; | |
} | |
100% { | |
opacity: 0; | |
} | |
} | |
.fadeInOut { | |
animation: fadeInOut 3s infinite; | |
} | |
@keyframes bounce { | |
0%, | |
20%, | |
50%, | |
80%, | |
100% { | |
transform: translateY(0); | |
} | |
40% { | |
transform: translateY(-20px); | |
} | |
60% { | |
transform: translateY(-10px); | |
} | |
} | |
.bounce { | |
animation: bounce 2s infinite; | |
} | |
@keyframes rotate { | |
0% { | |
transform: rotate(0deg); | |
} | |
100% { | |
transform: rotate(360deg); | |
} | |
} | |
.rotate { | |
animation: rotate 5s infinite linear; | |
} | |
@keyframes pulse { | |
0% { | |
transform: scale(1); | |
} | |
50% { | |
transform: scale(1.1); | |
} | |
100% { | |
transform: scale(1); | |
} | |
} | |
.pulse { | |
animation: pulse 2s infinite; | |
} | |
@keyframes wobble { | |
0% { | |
transform: rotate(0deg); | |
} | |
25% { | |
transform: rotate(-5deg); | |
} | |
50% { | |
transform: rotate(0deg); | |
} | |
75% { | |
transform: rotate(5deg); | |
} | |
100% { | |
transform: rotate(0deg); | |
} | |
} | |
.wobble { | |
animation: wobble 1s infinite; | |
} | |
@keyframes slideInLeft { | |
0% { | |
transform: translateX(-100%); | |
} | |
100% { | |
transform: translateX(0); | |
} | |
} | |
.slideInLeft { | |
animation: slideInLeft 2s forwards; | |
} | |
@keyframes slideInRight { | |
0% { | |
transform: translateX(100%); | |
} | |
100% { | |
transform: translateX(0); | |
} | |
} | |
.slideInRight { | |
animation: slideInRight 2s forwards; | |
} | |
@keyframes slideInUp { | |
0% { | |
transform: translateY(100%); | |
} | |
100% { | |
transform: translateY(0); | |
} | |
} | |
.slideInUp { | |
animation: slideInUp 2s forwards; | |
} | |
@keyframes slideInDown { | |
0% { | |
transform: translateY(-100%); | |
} | |
100% { | |
transform: translateY(0); | |
} | |
} | |
.slideInDown { | |
animation: slideInDown 2s forwards; | |
} | |
@keyframes slideOutLeft { | |
0% { | |
transform: translateX(0); | |
} | |
100% { | |
transform: translateX(-100%); | |
} | |
} | |
.slideOutLeft { | |
animation: slideOutLeft 2s forwards; | |
} | |
@keyframes slideOutRight { | |
0% { | |
transform: translateX(0); | |
} | |
100% { | |
transform: translateX(100%); | |
} | |
} | |
.slideOutRight { | |
animation: slideOutRight 2s forwards; | |
} | |
@keyframes slideOutUp { | |
0% { | |
transform: translateY(0); | |
} | |
100% { | |
transform: translateY(-100%); | |
} | |
} | |
.slideOutUp { | |
animation: slideOutUp 2s forwards; | |
} | |
@keyframes slideOutDown { | |
0% { | |
transform: translateY(0); | |
} | |
100% { | |
transform: translateY(100%); | |
} | |
} | |
.slideOutDown { | |
animation: slideOutDown 2s forwards; | |
} | |
@keyframes fadeIn { | |
0% { | |
opacity: 0; | |
} | |
100% { | |
opacity: 1; | |
} | |
} | |
.fadeIn { | |
animation: fadeIn 2s forwards; | |
} | |
@keyframes fadeOut { | |
0% { | |
opacity: 1; | |
} | |
100% { | |
opacity: 0; | |
} | |
} | |
.fadeOut { | |
animation: fadeOut 2s forwards; | |
} | |
@keyframes fadeInLeft { | |
0% { | |
opacity: 0; | |
transform: translateX(-100%); | |
} | |
100% { | |
opacity: 1; | |
transform: translateX(0); | |
} | |
} | |
.fadeInLeft { | |
animation: fadeInLeft 2s forwards; | |
} | |
@keyframes fadeInRight { | |
0% { | |
opacity: 0; | |
transform: translateX(100%); | |
} | |
100% { | |
opacity: 1; | |
transform: translateX(0); | |
} | |
} | |
.fadeInRight { | |
animation: fadeInRight 2s forwards; | |
} | |
@keyframes fadeInUp { | |
0% { | |
opacity: 0; | |
transform: translateY(100%); | |
} | |
100% { | |
opacity: 1; | |
transform: translateY(0); | |
} | |
} | |
.fadeInUp { | |
animation: fadeInUp 2s forwards; | |
} | |
@keyframes fadeInDown { | |
0% { | |
opacity: 0; | |
transform: translateY(-100%); | |
} | |
100% { | |
opacity: 1; | |
transform: translateY(0); | |
} | |
} | |
.fadeInDown { | |
animation: fadeInDown 2s forwards; | |
} | |
@keyframes fadeOutLeft { | |
0% { | |
opacity: 1; | |
transform: translateX(0); | |
} | |
100% { | |
opacity: 0; | |
transform: translateX(-100%); | |
} | |
} | |
.fadeOutLeft { | |
animation: fadeOutLeft 2s forwards; | |
} | |
@keyframes fadeOutRight { | |
0% { | |
opacity: 1; | |
transform: translateX(0); | |
} | |
100% { | |
opacity: 0; | |
transform: translateX(100%); | |
} | |
} | |
.fadeOutRight { | |
animation: fadeOutRight 2s forwards; | |
} | |
@keyframes fadeOutUp { | |
0% { | |
opacity: 1; | |
transform: translateY(0); | |
} | |
100% { | |
opacity: 0; | |
transform: translateY(-100%); | |
} | |
} | |
.fadeOutUp { | |
animation: fadeOutUp 2s forwards; | |
} | |
@keyframes fadeOutDown { | |
0% { | |
opacity: 1; | |
transform: translateY(0); | |
} | |
100% { | |
opacity: 0; | |
transform: translateY(100%); | |
} | |
} | |
.fadeOutDown { | |
animation: fadeOutDown 2s forwards; | |
} | |
@keyframes zoomIn { | |
0% { | |
opacity: 0; | |
transform: scale(0); | |
} | |
100% { | |
opacity: 1; | |
transform: scale(1); | |
} | |
} | |
.zoomIn { | |
animation: zoomIn 2s forwards; | |
} | |
@keyframes zoomOut { | |
0% { | |
opacity: 1; | |
transform: scale(1); | |
} | |
100% { | |
opacity: 0; | |
transform: scale(0); | |
} | |
} | |
.zoomOut { | |
animation: zoomOut 2s forwards; | |
} | |
@keyframes zoomInLeft { | |
0% { | |
opacity: 0; | |
transform: scale(0) translateX(-100%); | |
} | |
100% { | |
opacity: 1; | |
transform: scale(1) translateX(0); | |
} | |
} | |
.zoomInLeft { | |
animation: zoomInLeft 2s forwards; | |
} | |
@keyframes zoomInRight { | |
0% { | |
opacity: 0; | |
transform: scale(0) translateX(100%); | |
} | |
100% { | |
opacity: 1; | |
transform: scale(1) translateX(0); | |
} | |
} | |
.zoomInRight { | |
animation: zoomInRight 2s forwards; | |
} | |
@keyframes zoomInUp { | |
0% { | |
opacity: 0; | |
transform: scale(0) translateY(100%); | |
} | |
100% { | |
opacity: 1; | |
transform: scale(1) translateY(0); | |
} | |
} | |
.zoomInUp { | |
animation: zoomInUp 2s forwards; | |
} | |
@keyframes zoomInDown { | |
0% { | |
opacity: 0; | |
transform: scale(0) translateY(-100%); | |
} | |
100% { | |
opacity: 1; | |
transform: scale(1) translateY(0); | |
} | |
} | |
.zoomInDown { | |
animation: zoomInDown 2s forwards; | |
} | |
@keyframes zoomOutLeft { | |
0% { | |
opacity: 1; | |
transform: scale(1) translateX(0); | |
} | |
100% { | |
opacity: 0; | |
transform: scale(0) translateX(-100%); | |
} | |
} | |
.zoomOutLeft { | |
animation: zoomOutLeft 2s forwards; | |
} | |
@keyframes zoomOutRight { | |
0% { | |
opacity: 1; | |
transform: scale(1) translateX(0); | |
} | |
100% { | |
opacity: 0; | |
transform: scale(0) translateX(100%); | |
} | |
} | |
.zoomOutRight { | |
animation: zoomOutRight 2s forwards; | |
} | |
@keyframes zoomOutUp { | |
0% { | |
opacity: 1; | |
transform: scale(1) translateY(0); | |
} | |
100% { | |
opacity: 0; | |
transform: scale(0) translateY(-100%); | |
} | |
} | |
.zoomOutUp { | |
animation: zoomOutUp 2s forwards; | |
} | |
@keyframes zoomOutDown { | |
0% { | |
opacity: 1; | |
transform: scale(1) translateY(0); | |
} | |
100% { | |
opacity: 0; | |
transform: scale(0) translateY(100%); | |
} | |
} | |
.zoomOutDown { | |
animation: zoomOutDown 2s forwards; | |
} | |
@keyframes rotateIn { | |
0% { | |
opacity: 0; | |
transform: rotate(-200deg); | |
} | |
100% { | |
opacity: 1; | |
transform: rotate(0); | |
} | |
} | |
.rotateIn { | |
animation: rotateIn 2s forwards; | |
} | |
@keyframes rotateOut { | |
0% { | |
opacity: 1; | |
transform: rotate(0); | |
} | |
100% { | |
opacity: 0; | |
transform: rotate(200deg); | |
} | |
} | |
.rotateOut { | |
animation: rotateOut 2s forwards; | |
} | |
@keyframes rotateInLeft { | |
0% { | |
opacity: 0; | |
transform: rotate(-200deg) translateX(-100%); | |
} | |
100% { | |
opacity: 1; | |
transform: rotate(0) translateX(0); | |
} | |
} | |
.rotateInLeft { | |
animation: rotateInLeft 2s forwards; | |
} | |
@keyframes rotateInRight { | |
0% { | |
opacity: 0; | |
transform: rotate(-200deg) translateX(100%); | |
} | |
100% { | |
opacity: 1; | |
transform: rotate(0) translateX(0); | |
} | |
} | |
.rotateInRight { | |
animation: rotateInRight 2s forwards; | |
} | |
@keyframes rotateInUpLeft { | |
0% { | |
opacity: 0; | |
transform: rotate(-200deg) translateX(-100%) translateY(100%); | |
} | |
100% { | |
opacity: 1; | |
transform: rotate(0) translateX(0) translateY(0); | |
} | |
} | |
.rotateInUpLeft { | |
animation: rotateInUpLeft 2s forwards; | |
} | |
@keyframes rotateInUpRight { | |
0% { | |
opacity: 0; | |
transform: rotate(-200deg) translateX(100%) translateY(100%); | |
} | |
100% { | |
opacity: 1; | |
transform: rotate(0) translateX(0) translateY(0); | |
} | |
} | |
.rotateInUpRight { | |
animation: rotateInUpRight 2s forwards; | |
} | |
@keyframes rotateInDownLeft { | |
0% { | |
opacity: 0; | |
transform: rotate(-200deg) translateX(-100%) translateY(-100%); | |
} | |
100% { | |
opacity: 1; | |
transform: rotate(0) translateX(0) translateY(0); | |
} | |
} | |
.rotateInDownLeft { | |
animation: rotateInDownLeft 2s forwards; | |
} | |
@keyframes rotateInDownRight { | |
0% { | |
opacity: 0; | |
transform: rotate(-200deg) translateX(100%) translateY(-100%); | |
} | |
100% { | |
opacity: 1; | |
transform: rotate(0) translateX(0) translateY(0); | |
} | |
} | |
.rotateInDownRight { | |
animation: rotateInDownRight 2s forwards; | |
} | |
@keyframes rotateOutLeft { | |
0% { | |
opacity: 1; | |
transform: rotate(0) translateX(0); | |
} | |
100% { | |
opacity: 0; | |
transform: rotate(200deg) translateX(-100%); | |
} | |
} | |
.rotateOutLeft { | |
animation: rotateOutLeft 2s forwards; | |
} | |
@keyframes rotateOutRight { | |
0% { | |
opacity: 1; | |
transform: rotate(0) translateX(0); | |
} | |
100% { | |
opacity: 0; | |
transform: rotate(200deg) translateX(100%); | |
} | |
} | |
.rotateOutRight { | |
animation: rotateOutRight 2s forwards; | |
} | |
@keyframes rotateOutUpLeft { | |
0% { | |
opacity: 1; | |
transform: rotate(0) translateX(0) translateY(0); | |
} | |
100% { | |
opacity: 0; | |
transform: rotate(200deg) translateX(-100%) translateY(100%); | |
} | |
} | |
.rotateOutUpLeft { | |
animation: rotateOutUpLeft 2s forwards; | |
} | |
@keyframes rotateOutUpRight { | |
0% { | |
opacity: 1; | |
transform: rotate(0) translateX(0) translateY(0); | |
} | |
100% { | |
opacity: 0; | |
transform: rotate(200deg) translateX(100%) translateY(100%); | |
} | |
} | |
.rotateOutUpRight { | |
animation: rotateOutUpRight 2s forwards; | |
} | |
@keyframes rotateOutDownLeft { | |
0% { | |
opacity: 1; | |
transform: rotate(0) translateX(0) translateY(0); | |
} | |
100% { | |
opacity: 0; | |
transform: rotate(200deg) translateX(-100%) translateY(-100%); | |
} | |
} | |
.rotateOutDownLeft { | |
animation: rotateOutDownLeft 2s forwards; | |
} | |
@keyframes rotateOutDownRight { | |
0% { | |
opacity: 1; | |
transform: rotate(0) translateX(0) translateY(0); | |
} | |
100% { | |
opacity: 0; | |
transform: rotate(200deg) translateX(100%) translateY(-100%); | |
} | |
} | |
.rotateOutDownRight { | |
animation: rotateOutDownRight 2s forwards; | |
} | |
@keyframes lightSpeedInLeft { | |
0% { | |
opacity: 0; | |
transform: translateX(-100%) skewX(-30deg); | |
} | |
60% { | |
opacity: 1; | |
transform: skewX(20deg); | |
} | |
80% { | |
transform: skewX(-5deg); | |
} | |
100% { | |
transform: translateX(0) skewX(0); | |
} | |
} | |
.lightSpeedInLeft { | |
animation: lightSpeedInLeft 2s forwards; | |
} | |
@keyframes lightSpeedInRight { | |
0% { | |
opacity: 0; | |
transform: translateX(100%) skewX(30deg); | |
} | |
60% { | |
opacity: 1; | |
transform: skewX(-20deg); | |
} | |
80% { | |
transform: skewX(5deg); | |
} | |
100% { | |
transform: translateX(0) skewX(0); | |
} | |
} | |
.lightSpeedInRight { | |
animation: lightSpeedInRight 2s forwards; | |
} | |
@keyframes lightSpeedOutLeft { | |
0% { | |
opacity: 1; | |
transform: translateX(0) skewX(0); | |
} | |
100% { | |
opacity: 0; | |
transform: translateX(-100%) skewX(-30deg); | |
} | |
} | |
.lightSpeedOutLeft { | |
animation: lightSpeedOutLeft 2s forwards; | |
} | |
@keyframes lightSpeedOutRight { | |
0% { | |
opacity: 1; | |
transform: translateX(0) skewX(0); | |
} | |
100% { | |
opacity: 0; | |
transform: translateX(100%) skewX(30deg); | |
} | |
} | |
.lightSpeedOutRight { | |
animation: lightSpeedOutRight 2s forwards; | |
} | |
@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) | |
scale3d(1, 1, 1); | |
animation-timing-function: ease-in; | |
} | |
80% { | |
transform: perspective(400px) rotateY(360deg) scale3d(0.95, 0.95, 0.95); | |
animation-timing-function: ease-in; | |
} | |
100% { | |
transform: perspective(400px) scale3d(1, 1, 1); | |
animation-timing-function: ease-in; | |
} | |
} | |
.flip { | |
animation: flip 2s forwards; | |
} | |
@keyframes flipInX { | |
0% { | |
transform: perspective(400px) rotateX(90deg); | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
transform: perspective(400px) rotateX(-20deg); | |
animation-timing-function: ease-in; | |
} | |
60% { | |
transform: perspective(400px) rotateX(10deg); | |
opacity: 1; | |
} | |
80% { | |
transform: perspective(400px) rotateX(-5deg); | |
} | |
100% { | |
transform: perspective(400px); | |
} | |
} | |
.flipInX { | |
animation: flipInX 2s forwards; | |
} | |
@keyframes flipInY { | |
0% { | |
transform: perspective(400px) rotateY(90deg); | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
transform: perspective(400px) rotateY(-20deg); | |
animation-timing-function: ease-in; | |
} | |
60% { | |
transform: perspective(400px) rotateY(10deg); | |
opacity: 1; | |
} | |
80% { | |
transform: perspective(400px) rotateY(-5deg); | |
} | |
100% { | |
transform: perspective(400px); | |
} | |
} | |
.flipInY { | |
animation: flipInY 2s forwards; | |
} | |
@keyframes flipOutX { | |
0% { | |
transform: perspective(400px); | |
} | |
30% { | |
transform: perspective(400px) rotateX(-20deg); | |
opacity: 1; | |
} | |
100% { | |
transform: perspective(400px) rotateX(90deg); | |
opacity: 0; | |
} | |
} | |
.flipOutX { | |
animation: flipOutX 2s forwards; | |
} | |
@keyframes flipOutY { | |
0% { | |
transform: perspective(400px); | |
} | |
30% { | |
transform: perspective(400px) rotateY(-20deg); | |
opacity: 1; | |
} | |
100% { | |
transform: perspective(400px) rotateY(90deg); | |
opacity: 0; | |
} | |
} | |
.flipOutY { | |
animation: flipOutY 2s forwards; | |
} | |
@keyframes fadeInTopLeft { | |
0% { | |
opacity: 0; | |
transform: translate(-20px, -20px); | |
} | |
100% { | |
opacity: 1; | |
transform: translate(0, 0); | |
} | |
} | |
.fadeInTopLeft { | |
animation: fadeInTopLeft 2s forwards; | |
} | |
@keyframes fadeInTopRight { | |
0% { | |
opacity: 0; | |
transform: translate(20px, -20px); | |
} | |
100% { | |
opacity: 1; | |
transform: translate(0, 0); | |
} | |
} | |
.fadeInTopRight { | |
animation: fadeInTopRight 2s forwards; | |
} | |
@keyframes fadeInBottomLeft { | |
0% { | |
opacity: 0; | |
transform: translate(-20px, 20px); | |
} | |
100% { | |
opacity: 1; | |
transform: translate(0, 0); | |
} | |
} | |
.fadeInBottomLeft { | |
animation: fadeInBottomLeft 2s forwards; | |
} | |
@keyframes fadeInBottomRight { | |
0% { | |
opacity: 0; | |
transform: translate(20px, 20px); | |
} | |
100% { | |
opacity: 1; | |
transform: translate(0, 0); | |
} | |
} | |
.fadeInBottomRight { | |
animation: fadeInBottomRight 2s forwards; | |
} | |
@keyframes fadeOutTopLeft { | |
0% { | |
opacity: 1; | |
transform: translate(0, 0); | |
} | |
100% { | |
opacity: 0; | |
transform: translate(-20px, -20px); | |
} | |
} | |
.fadeOutTopLeft { | |
animation: fadeOutTopLeft 2s forwards; | |
} | |
@keyframes fadeOutTopRight { | |
0% { | |
opacity: 1; | |
transform: translate(0, 0); | |
} | |
100% { | |
opacity: 0; | |
transform: translate(20px, -20px); | |
} | |
} | |
.fadeOutTopRight { | |
animation: fadeOutTopRight 2s forwards; | |
} | |
.rollIn { | |
animation: rollIn 2s forwards; | |
} | |
@keyframes rollIn { | |
0% { | |
transform: translateX(-100%) rotate(-120deg); | |
opacity: 0; | |
} | |
100% { | |
transform: translateX(0) rotate(0); | |
opacity: 1; | |
} | |
} | |
.rollOut { | |
animation: rollOut 2s forwards; | |
} | |
@keyframes rollOut { | |
0% { | |
transform: translateX(0) rotate(0); | |
opacity: 1; | |
} | |
100% { | |
transform: translateX(100%) rotate(120deg); | |
opacity: 0; | |
} | |
} | |
.hinge { | |
animation: hinge 2s forwards; | |
} | |
@keyframes hinge { | |
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%, | |
80% { | |
transform: rotate(60deg); | |
transform-origin: top left; | |
animation-timing-function: ease-in-out; | |
opacity: 1; | |
} | |
100% { | |
transform: translate3d(0, 700px, 0); | |
opacity: 0; | |
} | |
} | |
.flash { | |
animation: flash 2s infinite; | |
} | |
@keyframes flash { | |
0%, | |
50%, | |
100% { | |
opacity: 1; | |
} | |
25%, | |
75% { | |
opacity: 0; | |
} | |
} | |
.shake { | |
animation: shake 2s infinite; | |
} | |
@keyframes shake { | |
10%, | |
90% { | |
transform: translate3d(-1px, 0, 0); | |
} | |
20%, | |
80% { | |
transform: translate3d(2px, 0, 0); | |
} | |
30%, | |
50%, | |
70% { | |
transform: translate3d(-4px, 0, 0); | |
} | |
40%, | |
60% { | |
transform: translate3d(4px, 0, 0); | |
} | |
} | |
@keyframes swing { | |
20% { | |
transform: rotate(15deg); | |
} | |
40% { | |
transform: rotate(-10deg); | |
} | |
60% { | |
transform: rotate(5deg); | |
} | |
80% { | |
transform: rotate(-5deg); | |
} | |
100% { | |
transform: rotate(0deg); | |
} | |
} | |
.swing { | |
transform-origin: top center; | |
animation: swing 2s infinite; | |
} | |
.headShake { | |
animation: headShake 2s infinite; | |
} | |
@keyframes headShake { | |
0% { | |
transform: translateX(0); | |
} | |
6.5% { | |
transform: translateX(-6px) rotateY(-9deg); | |
} | |
18.5% { | |
transform: translateX(5px) rotateY(7deg); | |
} | |
31.5% { | |
transform: translateX(-3px) rotateY(-5deg); | |
} | |
43.5% { | |
transform: translateX(2px) rotateY(3deg); | |
} | |
100% { | |
transform: translateX(0); | |
} | |
} | |
.jackInTheBox { | |
animation: jackInTheBox 2s; | |
} | |
@keyframes jackInTheBox { | |
0% { | |
opacity: 0; | |
transform: scale(0.1) rotate(30deg); | |
transform-origin: center bottom; | |
} | |
50% { | |
transform: rotate(-10deg); | |
} | |
70% { | |
transform: rotate(3deg); | |
} | |
100% { | |
opacity: 1; | |
transform: scale(1); | |
} | |
} | |
.bounceIn { | |
animation: bounceIn 2s; | |
} | |
@keyframes bounceIn { | |
0% { | |
transform: scale(0.3); | |
opacity: 0; | |
} | |
50% { | |
transform: scale(1.05); | |
opacity: 1; | |
} | |
70% { | |
transform: scale(0.9); | |
} | |
100% { | |
transform: scale(1); | |
} | |
} | |
.bounceInDown { | |
animation: bounceInDown 2s; | |
} | |
@keyframes bounceInDown { | |
0% { | |
transform: translateY(-2000px); | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
60% { | |
transform: translateY(30px); | |
animation-timing-function: ease-out; | |
} | |
80% { | |
transform: translateY(-10px); | |
} | |
100% { | |
transform: translateY(0); | |
opacity: 1; | |
} | |
} | |
.bounceInUp { | |
animation: bounceInUp 2s; | |
} | |
@keyframes bounceInUp { | |
0% { | |
transform: translateY(2000px); | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
60% { | |
transform: translateY(-30px); | |
animation-timing-function: ease-out; | |
} | |
80% { | |
transform: translateY(10px); | |
} | |
100% { | |
transform: translateY(0); | |
opacity: 1; | |
} | |
} | |
.bounceInLeft { | |
animation: bounceInLeft 2s; | |
} | |
@keyframes bounceInLeft { | |
0% { | |
transform: translateX(-2000px); | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
60% { | |
transform: translateX(30px); | |
animation-timing-function: ease-out; | |
} | |
80% { | |
transform: translateX(-10px); | |
} | |
100% { | |
transform: translateX(0); | |
opacity: 1; | |
} | |
} | |
.bounceInRight { | |
animation: bounceInRight 2s; | |
} | |
@keyframes bounceInRight { | |
0% { | |
transform: translateX(2000px); | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
60% { | |
transform: translateX(-30px); | |
animation-timing-function: ease-out; | |
} | |
80% { | |
transform: translateX(10px); | |
} | |
100% { | |
transform: translateX(0); | |
opacity: 1; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment