/* ========================================================== IMPACTA GAMES ANIMATIONS ========================================================== CONTENIDO 1. Animation Utilities 2. Duration 3. Delay 4. Iteration 5. Fill Mode 6. Direction 7. Play State 8. Fade 9. Slide 10. Zoom 11. Rotate 12. Pulse 13. Bounce 14. Shake 15. Spin 16. Float ========================================================== */ /*========================================================== ANIMATION UTILITIES ==========================================================*/ .ig-animate{ animation-duration:.6s; animation-fill-mode:both; animation-timing-function:ease; } .ig-animate-fast{ animation-duration:.3s; } .ig-animate-slow{ animation-duration:1s; } /*========================================================== DURATION ==========================================================*/ .ig-duration-200{ animation-duration:.2s; } .ig-duration-300{ animation-duration:.3s; } .ig-duration-500{ animation-duration:.5s; } .ig-duration-700{ animation-duration:.7s; } .ig-duration-1000{ animation-duration:1s; } /*========================================================== DELAY ==========================================================*/ .ig-delay-100{ animation-delay:.1s; } .ig-delay-300{ animation-delay:.3s; } .ig-delay-500{ animation-delay:.5s; } .ig-delay-1000{ animation-delay:1s; } /*========================================================== ITERATION ==========================================================*/ .ig-once{ animation-iteration-count:1; } .ig-repeat{ animation-iteration-count:infinite; } /*========================================================== FILL MODE ==========================================================*/ .ig-fill-none{ animation-fill-mode:none; } .ig-fill-forwards{ animation-fill-mode:forwards; } .ig-fill-backwards{ animation-fill-mode:backwards; } .ig-fill-both{ animation-fill-mode:both; } /*========================================================== DIRECTION ==========================================================*/ .ig-normal{ animation-direction:normal; } .ig-reverse{ animation-direction:reverse; } .ig-alternate{ animation-direction:alternate; } /*========================================================== PLAY STATE ==========================================================*/ .ig-paused{ animation-play-state:paused; } .ig-running{ animation-play-state:running; } /*========================================================== FADE ==========================================================*/ .ig-fade-in{ animation-name:igFadeIn; } .ig-fade-out{ animation-name:igFadeOut; } /*========================================================== SLIDE ==========================================================*/ .ig-slide-up{ animation-name:igSlideUp; } .ig-slide-down{ animation-name:igSlideDown; } .ig-slide-left{ animation-name:igSlideLeft; } .ig-slide-right{ animation-name:igSlideRight; } /*========================================================== ZOOM ==========================================================*/ .ig-zoom-in{ animation-name:igZoomIn; } .ig-zoom-out{ animation-name:igZoomOut; } /*========================================================== ROTATE ==========================================================*/ .ig-rotate{ animation-name:igRotate; } /*========================================================== PULSE ==========================================================*/ .ig-pulse{ animation-name:igPulse; } /*========================================================== BOUNCE ==========================================================*/ .ig-bounce{ animation-name:igBounce; } /*========================================================== SHAKE ==========================================================*/ .ig-shake{ animation-name:igShake; } /*========================================================== SPIN ==========================================================*/ .ig-spin{ animation-name:igSpin; } /*========================================================== FLOAT ==========================================================*/ .ig-float{ animation-name:igFloat; } /*========================================================== KEYFRAMES ==========================================================*/ /* Fade */ @keyframes igFadeIn{ from{ opacity:0; } to{ opacity:1; } } @keyframes igFadeOut{ from{ opacity:1; } to{ opacity:0; } } /* Slide */ @keyframes igSlideUp{ from{ opacity:0; transform:translateY(40px); } to{ opacity:1; transform:translateY(0); } } @keyframes igSlideDown{ from{ opacity:0; transform:translateY(-40px); } to{ opacity:1; transform:translateY(0); } } @keyframes igSlideLeft{ from{ opacity:0; transform:translateX(40px); } to{ opacity:1; transform:translateX(0); } } @keyframes igSlideRight{ from{ opacity:0; transform:translateX(-40px); } to{ opacity:1; transform:translateX(0); } } /* Zoom */ @keyframes igZoomIn{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:scale(1); } } @keyframes igZoomOut{ from{ opacity:0; transform:scale(1.2); } to{ opacity:1; transform:scale(1); } } /* Rotate */ @keyframes igRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } /* Pulse */ @keyframes igPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } } /* Bounce */ @keyframes igBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } } /* Shake */ @keyframes igShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } } /* Spin */ @keyframes igSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } /* Float */ @keyframes igFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }