mycsslab
Version:
MyCSSLab Quantum v3.0 - Revolutionary CSS framework with AI-powered intelligence, holographic UI, neural networks, and quantum effects
1,784 lines (1,588 loc) • 91.3 kB
CSS
/**
* FluxCSS Advanced Animations
* Comprehensive animation system with professional-grade effects
*/
/* Fade Animations */
.my-fade-in {
animation: fadeIn 0.6s ease-out;
}
.my-fade-out {
animation: fadeOut 0.6s ease-out;
}
.my-fade-in-up {
animation: fadeInUp 0.8s ease-out;
}
.my-fade-in-down {
animation: fadeInDown 0.8s ease-out;
}
.my-fade-in-left {
animation: fadeInLeft 0.8s ease-out;
}
.my-fade-in-right {
animation: fadeInRight 0.8s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Scale Animations */
.my-scale-in {
animation: scaleIn 0.5s ease-out;
}
.my-scale-out {
animation: scaleOut 0.5s ease-out;
}
.my-bounce-in {
animation: bounceIn 0.8s ease-out;
}
.my-zoom-in {
animation: zoomIn 0.3s ease-out;
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes scaleOut {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.8);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale(0.5);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Rotate Animations */
.my-rotate-in {
animation: rotateIn 0.6s ease-out;
}
.my-flip-in {
animation: flipIn 0.6s ease-out;
}
@keyframes rotateIn {
from {
opacity: 0;
transform: rotate(-180deg) scale(0.8);
}
to {
opacity: 1;
transform: rotate(0deg) scale(1);
}
}
@keyframes flipIn {
from {
opacity: 0;
transform: rotateY(-90deg);
}
to {
opacity: 1;
transform: rotateY(0deg);
}
}
/* Slide Animations */
.my-slide-up {
animation: slideUp 0.6s ease-out;
}
.my-slide-down {
animation: slideDown 0.6s ease-out;
}
.my-slide-left {
animation: slideLeft 0.6s ease-out;
}
.my-slide-right {
animation: slideRight 0.6s ease-out;
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideLeft {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes slideRight {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
/* Pulse Animations */
.my-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.my-pulse-slow {
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.my-pulse-fast {
animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Bounce Animations */
.my-bounce {
animation: bounce 1s infinite;
}
.my-bounce-slow {
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
}
40%, 43% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0,-4px,0);
}
}
/* Shake Animation */
.my-shake {
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}
/* Wobble Animation */
.my-wobble {
animation: wobble 1s ease-in-out;
}
@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%); }
}
/* Float Animation */
.my-float {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
/* Glow Animation */
.my-glow {
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from {
box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}
to {
box-shadow: 0 0 30px rgba(102, 126, 234, 0.8), 0 0 40px rgba(102, 126, 234, 0.6);
}
}
/* Delay Classes */
.my-delay-100 { animation-delay: 0.1s; }
.my-delay-200 { animation-delay: 0.2s; }
.my-delay-300 { animation-delay: 0.3s; }
.my-delay-500 { animation-delay: 0.5s; }
.my-delay-700 { animation-delay: 0.7s; }
.my-delay-1000 { animation-delay: 1s; }
/* Duration Classes */
.my-duration-75 { animation-duration: 75ms; }
.my-duration-100 { animation-duration: 100ms; }
.my-duration-150 { animation-duration: 150ms; }
.my-duration-200 { animation-duration: 200ms; }
.my-duration-300 { animation-duration: 300ms; }
.my-duration-500 { animation-duration: 500ms; }
.my-duration-700 { animation-duration: 700ms; }
.my-duration-1000 { animation-duration: 1000ms; }
/* Extended Duration Classes */
.my-duration-50 { animation-duration: 50ms; }
.my-duration-125 { animation-duration: 125ms; }
.my-duration-250 { animation-duration: 250ms; }
.my-duration-400 { animation-duration: 400ms; }
.my-duration-600 { animation-duration: 600ms; }
.my-duration-800 { animation-duration: 800ms; }
.my-duration-900 { animation-duration: 900ms; }
.my-duration-1200 { animation-duration: 1200ms; }
.my-duration-1500 { animation-duration: 1500ms; }
.my-duration-2000 { animation-duration: 2000ms; }
.my-duration-3000 { animation-duration: 3000ms; }
.my-duration-5000 { animation-duration: 5000ms; }
/* Extended Delay Classes */
.my-delay-50 { animation-delay: 50ms; }
.my-delay-75 { animation-delay: 75ms; }
.my-delay-125 { animation-delay: 125ms; }
.my-delay-150 { animation-delay: 150ms; }
.my-delay-250 { animation-delay: 250ms; }
.my-delay-400 { animation-delay: 400ms; }
.my-delay-600 { animation-delay: 600ms; }
.my-delay-800 { animation-delay: 800ms; }
.my-delay-900 { animation-delay: 900ms; }
.my-delay-1200 { animation-delay: 1200ms; }
.my-delay-1500 { animation-delay: 1500ms; }
.my-delay-2000 { animation-delay: 2000ms; }
.my-delay-3000 { animation-delay: 3000ms; }
.my-delay-5000 { animation-delay: 5000ms; }
/* Animation Fill Modes */
.my-fill-none { animation-fill-mode: none; }
.my-fill-forwards { animation-fill-mode: forwards; }
.my-fill-backwards { animation-fill-mode: backwards; }
.my-fill-both { animation-fill-mode: both; }
/* Animation Iteration Count */
.my-iterate-1 { animation-iteration-count: 1; }
.my-iterate-2 { animation-iteration-count: 2; }
.my-iterate-3 { animation-iteration-count: 3; }
.my-iterate-infinite { animation-iteration-count: infinite; }
/* Animation Direction */
.my-direction-normal { animation-direction: normal; }
.my-direction-reverse { animation-direction: reverse; }
.my-direction-alternate { animation-direction: alternate; }
.my-direction-alternate-reverse { animation-direction: alternate-reverse; }
/* Animation Play State */
.my-play-paused { animation-play-state: paused; }
.my-play-running { animation-play-state: running; }
/* Animation Timing Functions */
.my-ease-linear { animation-timing-function: linear; }
.my-ease-in { animation-timing-function: ease-in; }
.my-ease-out { animation-timing-function: ease-out; }
.my-ease-in-out { animation-timing-function: ease-in-out; }
.my-ease-in-sine { animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
.my-ease-out-sine { animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
.my-ease-in-out-sine { animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
.my-ease-in-quad { animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0); }
.my-ease-out-quad { animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1); }
.my-ease-in-out-quad { animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
.my-ease-in-cubic { animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
.my-ease-out-cubic { animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
.my-ease-in-out-cubic { animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
.my-ease-in-quart { animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
.my-ease-out-quart { animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
.my-ease-in-out-quart { animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }
.my-ease-in-quint { animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0); }
.my-ease-out-quint { animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.my-ease-in-out-quint { animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1); }
.my-ease-in-expo { animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
.my-ease-out-expo { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.my-ease-in-out-expo { animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1); }
.my-ease-in-circ { animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
.my-ease-out-circ { animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
.my-ease-in-out-circ { animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1); }
.my-ease-in-back { animation-timing-function: cubic-bezier(0.36, 0, 0.66, -0.56); }
.my-ease-out-back { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
.my-ease-in-out-back { animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6); }
/* Advanced Fade Animations */
.my-fade-in-fast { animation: fadeIn 0.3s ease-out; }
.my-fade-in-slow { animation: fadeIn 1s ease-out; }
.my-fade-out-fast { animation: fadeOut 0.3s ease-out; }
.my-fade-out-slow { animation: fadeOut 1s ease-out; }
.my-fade-in-up-fast { animation: fadeInUp 0.4s ease-out; }
.my-fade-in-up-slow { animation: fadeInUp 1.2s ease-out; }
.my-fade-in-down-fast { animation: fadeInDown 0.4s ease-out; }
.my-fade-in-down-slow { animation: fadeInDown 1.2s ease-out; }
.my-fade-in-left-fast { animation: fadeInLeft 0.4s ease-out; }
.my-fade-in-left-slow { animation: fadeInLeft 1.2s ease-out; }
.my-fade-in-right-fast { animation: fadeInRight 0.4s ease-out; }
.my-fade-in-right-slow { animation: fadeInRight 1.2s ease-out; }
/* Advanced Scale Animations */
.my-scale-in-fast { animation: scaleIn 0.3s ease-out; }
.my-scale-in-slow { animation: scaleIn 0.8s ease-out; }
.my-scale-out-fast { animation: scaleOut 0.3s ease-out; }
.my-scale-out-slow { animation: scaleOut 0.8s ease-out; }
.my-bounce-in-fast { animation: bounceIn 0.5s ease-out; }
.my-bounce-in-slow { animation: bounceIn 1.2s ease-out; }
.my-zoom-in-fast { animation: zoomIn 0.2s ease-out; }
.my-zoom-in-slow { animation: zoomIn 0.6s ease-out; }
/* Advanced Rotate Animations */
.my-rotate-in-fast { animation: rotateIn 0.4s ease-out; }
.my-rotate-in-slow { animation: rotateIn 1s ease-out; }
.my-flip-in-fast { animation: flipIn 0.4s ease-out; }
.my-flip-in-slow { animation: flipIn 1s ease-out; }
/* Advanced Slide Animations */
.my-slide-up-fast { animation: slideUp 0.4s ease-out; }
.my-slide-up-slow { animation: slideUp 1s ease-out; }
.my-slide-down-fast { animation: slideDown 0.4s ease-out; }
.my-slide-down-slow { animation: slideDown 1s ease-out; }
.my-slide-left-fast { animation: slideLeft 0.4s ease-out; }
.my-slide-left-slow { animation: slideLeft 1s ease-out; }
.my-slide-right-fast { animation: slideRight 0.4s ease-out; }
.my-slide-right-slow { animation: slideRight 1s ease-out; }
/* Advanced Pulse Animations */
.my-pulse-very-slow { animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.my-pulse-very-fast { animation: pulse 0.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
/* Advanced Bounce Animations */
.my-bounce-very-slow { animation: bounce 3s infinite; }
.my-bounce-very-fast { animation: bounce 0.5s infinite; }
/* Advanced Shake Animations */
.my-shake-fast { animation: shake 0.3s ease-in-out; }
.my-shake-slow { animation: shake 0.8s ease-in-out; }
/* Advanced Wobble Animations */
.my-wobble-fast { animation: wobble 0.5s ease-in-out; }
.my-wobble-slow { animation: wobble 2s ease-in-out; }
/* Advanced Float Animations */
.my-float-fast { animation: float 2s ease-in-out infinite; }
.my-float-slow { animation: float 5s ease-in-out infinite; }
/* Advanced Glow Animations */
.my-glow-fast { animation: glow 1s ease-in-out infinite alternate; }
.my-glow-slow { animation: glow 4s ease-in-out infinite alternate; }
/* New Animation Types */
.my-spin { animation: spin 1s linear infinite; }
.my-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.my-bounce-slow { animation: bounce 2s infinite; }
.my-bounce-fast { animation: bounce 0.5s infinite; }
/* New Keyframe Animations */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
/* Additional Keyframe Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.5);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes scaleOut {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.5);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale(0.3);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes rotateIn {
from {
opacity: 0;
transform: rotate(-200deg);
}
to {
opacity: 1;
transform: rotate(0deg);
}
}
@keyframes flipIn {
from {
opacity: 0;
transform: rotateY(-90deg);
}
to {
opacity: 1;
transform: rotateY(0deg);
}
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideLeft {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes slideRight {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}
@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%); }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes glow {
from {
box-shadow: 0 0 20px #3b82f6;
}
to {
box-shadow: 0 0 30px #3b82f6, 0 0 40px #3b82f6;
}
}
/* Advanced Keyframe Animations */
@keyframes heartbeat {
0% { transform: scale(1); }
14% { transform: scale(1.3); }
28% { transform: scale(1); }
42% { transform: scale(1.3); }
70% { transform: scale(1); }
}
@keyframes rubberBand {
0% { transform: scale(1); }
30% { transform: scaleX(1.25) scaleY(0.75); }
40% { transform: scaleX(0.75) scaleY(1.25); }
50% { transform: scaleX(1.15) scaleY(0.85); }
65% { transform: scaleX(0.95) scaleY(1.05); }
75% { transform: scaleX(1.05) scaleY(0.95); }
100% { transform: scale(1); }
}
@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); }
}
@keyframes jello {
0%, 11.1%, 100% { transform: translate3d(0, 0, 0); }
22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}
@keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
@keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
@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); transform-origin: top left; animation-timing-function: ease-in-out; }
100% { transform: translateY(700px); }
}
@keyframes jackInTheBox {
from {
opacity: 0;
transform: scale(0.1) rotate(30deg);
transform-origin: center bottom;
}
50% {
transform: rotate(-10deg);
}
70% {
transform: rotate(3deg);
}
to {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes lightSpeedIn {
from {
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
transform: skewX(20deg);
opacity: 1;
}
80% {
transform: skewX(-5deg);
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
@keyframes rollIn {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0) rotate(-120deg);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(100%, 0, 0) rotate(120deg);
}
}
@keyframes zoomInUp {
from {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInDown {
from {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInLeft {
from {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInRight {
from {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
@keyframes zoomOutUp {
40% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform-origin: center top;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutLeft {
40% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(-2000px, 0, 0);
transform-origin: left center;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutRight {
40% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(2000px, 0, 0);
transform-origin: right center;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
/* Additional Keyframe Animations */
@keyframes fadeOutUp {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-30px);
}
}
@keyframes fadeOutDown {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(30px);
}
}
@keyframes fadeOutLeft {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(-30px);
}
}
@keyframes fadeOutRight {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(30px);
}
}
@keyframes slideInUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideInDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes slideOutUp {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
@keyframes slideOutDown {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
@keyframes slideOutLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes slideOutRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
@keyframes rotateOut {
from {
opacity: 1;
transform: rotate(0deg);
}
to {
opacity: 0;
transform: rotate(200deg);
}
}
@keyframes flipOut {
from {
opacity: 1;
transform: rotateY(0deg);
}
to {
opacity: 0;
transform: rotateY(90deg);
}
}
@keyframes bounceOut {
0% {
opacity: 1;
transform: scale(1);
}
20% {
transform: scale(0.9);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(0.3);
}
}
/* Advanced Keyframe Animations */
@keyframes flipInX {
from {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateX(-20deg);
}
60% {
transform: perspective(400px) rotateX(10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotateX(-5deg);
}
to {
transform: perspective(400px) rotateX(0deg);
}
}
@keyframes flipOutX {
from {
transform: perspective(400px) rotateX(0deg);
}
30% {
transform: perspective(400px) rotateX(-20deg);
opacity: 1;
}
to {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@keyframes flipInY {
from {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateY(-20deg);
}
60% {
transform: perspective(400px) rotateY(10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotateY(-5deg);
}
to {
transform: perspective(400px) rotateY(0deg);
}
}
@keyframes flipOutY {
from {
transform: perspective(400px) rotateY(0deg);
}
30% {
transform: perspective(400px) rotateY(-20deg);
opacity: 1;
}
to {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
@keyframes rotateInDownLeft {
from {
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
from {
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
from {
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
from {
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateOutDownLeft {
from {
opacity: 1;
}
to {
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
from {
opacity: 1;
}
to {
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
from {
opacity: 1;
}
to {
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
from {
opacity: 1;
}
to {
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
/* Additional Keyframe Animations */
@keyframes fadeOutUp {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-30px);
}
}
@keyframes fadeOutDown {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(30px);
}
}
@keyframes fadeOutLeft {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(-30px);
}
}
@keyframes fadeOutRight {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(30px);
}
}
@keyframes slideInUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideInDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes slideOutUp {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
@keyframes slideOutDown {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
@keyframes slideOutLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes slideOutRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
@keyframes rotateOut {
from {
opacity: 1;
transform: rotate(0deg);
}
to {
opacity: 0;
transform: rotate(200deg);
}
}
@keyframes flipOut {
from {
opacity: 1;
transform: rotateY(0deg);
}
to {
opacity: 0;
transform: rotateY(90deg);
}
}
@keyframes bounceOut {
0% {
opacity: 1;
transform: scale(1);
}
20% {
transform: scale(0.9);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(0.3);
}
}
/* Additional Animation Classes */
.my-flip-in-x { animation: flipInX 1s; }
.my-flip-out-x { animation: flipOutX 1s; }
.my-flip-in-y { animation: flipInY 1s; }
.my-flip-out-y { animation: flipOutY 1s; }
.my-rotate-in-down-left { animation: rotateInDownLeft 1s; }
.my-rotate-in-down-right { animation: rotateInDownRight 1s; }
.my-rotate-in-up-left { animation: rotateInUpLeft 1s; }
.my-rotate-in-up-right { animation: rotateInUpRight 1s; }
.my-rotate-out-down-left { animation: rotateOutDownLeft 1s; }
.my-rotate-out-down-right { animation: rotateOutDownRight 1s; }
.my-rotate-out-up-left { animation: rotateOutUpLeft 1s; }
.my-rotate-out-up-right { animation: rotateOutUpRight 1s; }
/* Hover Versions */
.my-hover-flip-in-x:hover { animation: flipInX 1s; }
.my-hover-flip-out-x:hover { animation: flipOutX 1s; }
.my-hover-flip-in-y:hover { animation: flipInY 1s; }
.my-hover-flip-out-y:hover { animation: flipOutY 1s; }
.my-hover-rotate-in-down-left:hover { animation: rotateInDownLeft 1s; }
.my-hover-rotate-in-down-right:hover { animation: rotateInDownRight 1s; }
.my-hover-rotate-in-up-left:hover { animation: rotateInUpLeft 1s; }
.my-hover-rotate-in-up-right:hover { animation: rotateInUpRight 1s; }
.my-hover-rotate-out-down-left:hover { animation: rotateOutDownLeft 1s; }
.my-hover-rotate-out-down-right:hover { animation: rotateOutDownRight 1s; }
.my-hover-rotate-out-up-left:hover { animation: rotateOutUpLeft 1s; }
.my-hover-rotate-out-up-right:hover { animation: rotateOutUpRight 1s; }
/* Focus Versions */
.my-focus-flip-in-x:focus { animation: flipInX 1s; }
.my-focus-flip-out-x:focus { animation: flipOutX 1s; }
.my-focus-flip-in-y:focus { animation: flipInY 1s; }
.my-focus-flip-out-y:focus { animation: flipOutY 1s; }
.my-focus-rotate-in-down-left:focus { animation: rotateInDownLeft 1s; }
.my-focus-rotate-in-down-right:focus { animation: rotateInDownRight 1s; }
.my-focus-rotate-in-up-left:focus { animation: rotateInUpLeft 1s; }
.my-focus-rotate-in-up-right:focus { animation: rotateInUpRight 1s; }
.my-focus-rotate-out-down-left:focus { animation: rotateOutDownLeft 1s; }
.my-focus-rotate-out-down-right:focus { animation: rotateOutDownRight 1s; }
.my-focus-rotate-out-up-left:focus { animation: rotateOutUpLeft 1s; }
.my-focus-rotate-out-up-right:focus { animation: rotateOutUpRight 1s; }
/* Active Versions */
.my-active-flip-in-x:active { animation: flipInX 1s; }
.my-active-flip-out-x:active { animation: flipOutX 1s; }
.my-active-flip-in-y:active { animation: flipInY 1s; }
.my-active-flip-out-y:active { animation: flipOutY 1s; }
.my-active-rotate-in-down-left:active { animation: rotateInDownLeft 1s; }
.my-active-rotate-in-down-right:active { animation: rotateInDownRight 1s; }
.my-active-rotate-in-up-left:active { animation: rotateInUpLeft 1s; }
.my-active-rotate-in-up-right:active { animation: rotateInUpRight 1s; }
.my-active-rotate-out-down-left:active { animation: rotateOutDownLeft 1s; }
.my-active-rotate-out-down-right:active { animation: rotateOutDownRight 1s; }
.my-active-rotate-out-up-left:active { animation: rotateOutUpLeft 1s; }
.my-active-rotate-out-up-right:active { animation: rotateOutUpRight 1s; }
/* Additional Animation Classes */
.my-heartbeat { animation: heartbeat 1.5s ease-in-out infinite; }
.my-rubber-band { animation: rubberBand 1s; }
.my-tada { animation: tada 1s; }
.my-jello { animation: jello 1s; }
.my-flash { animation: flash 1s; }
.my-swing { animation: swing 1s; }
.my-hinge { animation: hinge 2s; }
.my-jack-in-the-box { animation: jackInTheBox 1s; }
.my-light-speed-in { animation: lightSpeedIn 1s; }
.my-light-speed-out { animation: lightSpeedOut 1s; }
.my-roll-in { animation: rollIn 1s; }
.my-roll-out { animation: rollOut 1s; }
.my-zoom-in-up { animation: zoomInUp 1s; }
.my-zoom-in-down { animation: zoomInDown 1s; }
.my-zoom-in-left { animation: zoomInLeft 1s; }
.my-zoom-in-right { animation: zoomInRight 1s; }
.my-zoom-out { animation: zoomOut 1s; }
.my-zoom-out-up { animation: zoomOutUp 1s; }
.my-zoom-out-down { animation: zoomOutDown 1s; }
.my-zoom-out-left { animation: zoomOutLeft 1s; }
.my-zoom-out-right { animation: zoomOutRight 1s; }
/* Additional Animation Utilities */
.my-animate-none { animation: none; }
.my-animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.my-animate-spin { animation: spin 1s linear infinite; }
.my-animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.my-animate-bounce { animation: bounce 1s infinite; }
/* Animation Duration Utilities */
.my-duration-75 { animation-duration: 75ms; }
.my-duration-100 { animation-duration: 100ms; }
.my-duration-150 { animation-duration: 150ms; }
.my-duration-200 { animation-duration: 200ms; }
.my-duration-300 { animation-duration: 300ms; }
.my-duration-500 { animation-duration: 500ms; }
.my-duration-700 { animation-duration: 700ms; }
.my-duration-1000 { animation-duration: 1000ms; }
/* Animation Delay Utilities */
.my-delay-75 { animation-delay: 75ms; }
.my-delay-100 { animation-delay: 100ms; }
.my-delay-150 { animation-delay: 150ms; }
.my-delay-200 { animation-delay: 200ms; }
.my-delay-300 { animation-delay: 300ms; }
.my-delay-500 { animation-delay: 500ms; }
.my-delay-700 { animation-delay: 700ms; }
.my-delay-1000 { animation-delay: 1000ms; }
/* Animation Iteration Count Utilities */
.my-iterate-1 { animation-iteration-count: 1; }
.my-iterate-2 { animation-iteration-count: 2; }
.my-iterate-3 { animation-iteration-count: 3; }
.my-iterate-infinite { animation-iteration-count: infinite; }
/* Animation Direction Utilities */
.my-direction-normal { animation-direction: normal; }
.my-direction-reverse { animation-direction: reverse; }
.my-direction-alternate { animation-direction: alternate; }
.my-direction-alternate-reverse { animation-direction: alternate-reverse; }
/* Animation Fill Mode Utilities */
.my-fill-none { animation-fill-mode: none; }
.my-fill-forwards { animation-fill-mode: forwards; }
.my-fill-backwards { animation-fill-mode: backwards; }
.my-fill-both { animation-fill-mode: both; }
/* Animation Play State Utilities */
.my-play-paused { animation-play-state: paused; }
.my-play-running { animation-play-state: running; }
/* Animation Timing Function Utilities */
.my-ease-linear { animation-timing-function: linear; }
.my-ease-in { animation-timing-function: ease-in; }
.my-ease-out { animation-timing-function: ease-out; }
.my-ease-in-out { animation-timing-function: ease-in-out; }
/* Advanced Animation Combinations */
.my-animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
.my-animate-fade-in-down { animation: fadeInDown 0.6s ease-out; }
.my-animate-fade-in-left { animation: fadeInLeft 0.6s ease-out; }
.my-animate-fade-in-right { animation: fadeInRight 0.6s ease-out; }
.my-animate-fade-out-up { animation: fadeOutUp 0.6s ease-out; }
.my-animate-fade-out-down { animation: fadeOutDown 0.6s ease-out; }
.my-animate-fade-out-left { animation: fadeOutLeft 0.6s ease-out; }
.my-animate-fade-out-right { animation: fadeOutRight 0.6s ease-out; }
.my-animate-slide-in-up { animation: slideInUp 0.6s ease-out; }
.my-animate-slide-in-down { animation: slideInDown 0.6s ease-out; }
.my-animate-slide-in-left { animation: slideInLeft 0.6s ease-out; }
.my-animate-slide-in-right { animation: slideInRight 0.6s ease-out; }
.my-animate-slide-out-up { animation: slideOutUp 0.6s ease-out; }
.my-animate-slide-out-down { animation: slideOutDown 0.6s ease-out; }
.my-animate-slide-out-left { animation: slideOutLeft 0.6s ease-out; }
.my-animate-slide-out-right { animation: slideOutRight 0.6s ease-out; }
.my-animate-zoom-in-up { animation: zoomInUp 0.6s ease-out; }
.my-animate-zoom-in-down { animation: zoomInDown 0.6s ease-out; }
.my-animate-zoom-in-left { animation: zoomInLeft 0.6s ease-out; }
.my-animate-zoom-in-right { animation: zoomInRight 0.6s ease-out; }
.my-animate-zoom-out-up { animation: zoomOutUp 0.6s ease-out; }
.my-animate-zoom-out-down { animation: zoomOutDown 0.6s ease-out; }
.my-animate-zoom-out-left { animation: zoomOutLeft 0.6s ease-out; }
.my-animate-zoom-out-right { animation: zoomOutRight 0.6s ease-out; }
.my-animate-rotate-in { animation: rotateIn 0.6s ease-out; }
.my-animate-rotate-out { animation: rotateOut 0.6s ease-out; }
.my-animate-flip-in { animation: flipIn 0.6s ease-out; }
.my-animate-flip-out { animation: flipOut 0.6s ease-out; }
.my-animate-bounce-in { animation: bounceIn 0.6s ease-out; }
.my-animate-bounce-out { animation: bounceOut 0.6s ease-out; }
.my-animate-shake { animation: shake 0.6s ease-in-out; }
.my-animate-wobble { animation: wobble 0.6s ease-in-out; }
.my-animate-heartbeat { animation: heartbeat 1.5s ease-in-out infinite; }
.my-animate-rubber-band { animation: rubberBand 1s; }
.my-animate-tada { animation: tada 1s; }
.my-animate-jello { animation: jello 1s; }
.my-animate-flash { animation: flash 1s; }
.my-animate-swing { animation: swing 1s; }
.my-animate-hinge { animation: hinge 2s; }
.my-animate-jack-in-the-box { animation: jackInTheBox 1s; }
.my-animate-light-speed-in { animation: lightSpeedIn 1s; }
.my-animate-light-speed-out { animation: lightSpeedOut 1s; }
.my-animate-roll-in { animation: rollIn 1s; }
.my-animate-roll-out { animation: rollOut 1s; }
/* Hover Animation Combinations */
.my-hover-fade-in-up:hover { animation: fadeInUp 0.6s ease-out; }
.my-hover-fade-in-down:hover { animation: fadeInDown 0.6s ease-out; }
.my-hover-fade-in-left:hover { animation: fadeInLeft 0.6s ease-out; }
.my-hover-fade-in-right:hover { animation: fadeInRight 0.6s ease-out; }
.my-hover-fade-out-up:hover { animation: fadeOutUp 0.6s ease-out; }
.my-hover-fade-out-down:hover { animation: fadeOutDown 0.6s ease-out; }
.my-hover-fade-out-left:hover { animation: fadeOutLeft 0.6s ease-out; }
.my-hover-fade-out-right:hover { animation: fadeOutRight 0.6s ease-out; }
.my-hover-slide-in-up:hover { animation: slideInUp 0.6s ease-out; }
.my-hover-slide-in-down:hover { animation: slideInDown 0.6s ease-out; }
.my-hover-slide-in-left:hover { animation: slideInLeft 0.6s ease-out; }
.my-hover-slide-in-right:hover { animation: slideInRight 0.6s ease-out; }
.my-hover-slide-out-up:hover { animation: slideOutUp 0.6s ease-out; }
.my-hover-slide-out-down:hover { animation: slideOutDown 0.6s ease-out; }
.my-hover-slide-out-left:hover { animation: slideOutLeft 0.6s ease-out; }
.my-hover-slide-out-right:hover { animation: slideOutRight 0.6s ease-out; }
.my-hover-zoom-in-up:hover { animation: zoomInUp 0.6s ease-out; }
.my-hover-zoom-in-down:hover { animation: zoomInDown 0.6s ease-out; }
.my-hover-zoom-in-left:hover { animation: zoomInLeft 0.6s ease-out; }
.my-hover-zoom-in-right:hover { animation: zoomInRight 0.6s ease-out; }
.my-hover-zoom-out-up:hover { animation: zoomOutUp 0.6s ease-out; }
.my-hover-zoom-out-down:hover { animation: zoomOutDown 0.6s ease-out; }
.my-hover-zoom-out-left:hover { animation: zoomOutLeft 0.6s ease-out; }
.my-hover-zoom-out-right:hover { animation: zoomOutRight 0.6s ease-out; }
.my-hover-rotate-in:hover { animation: rotateIn 0.6s ease-out; }
.my-hover-rotate-out:hover { animation: rotateOut 0.6s ease-out; }
.my-hover-flip-in:hover { animation: flipIn 0.6s ease-out; }
.my-hover-flip-out:hover { animation: flipOut 0.6s ease-out; }
.my-hover-bounce-in:hover { animation: bounceIn 0.6s ease-out; }
.my-hover-bounce-out:hover { animation: bounceOut 0.6s ease-out; }
.my-hover-shake:hover { animation: shake 0.6s ease-in-out; }
.my-hover-wobble:hover { animation: wobble 0.6s ease-in-out; }
.my-hover-heartbeat:hover { animation: heartbeat 1.5s ease-in-out infinite; }
.my-hover-rubber-band:hover { animation: rubberBand 1s; }
.my-hover-tada:hover { animation: tada 1s; }
.my-hover-jello:hover { animation: jello 1s; }
.my-hover-flash:hover { animation: flash 1s; }
.my-hover-swing:hover { animation: swing 1s; }
.my-hover-hinge:hover { animation: hinge 2s; }
.my-hover-jack-in-the-box:hover { animation: jackInTheBox 1s; }
.my-hover-light-speed-in:hover { animation: lightSpeedIn 1s; }
.my-hover-light-speed-out:hover { animation: lightSpeedOut 1s; }
.my-hover-roll-in:hover { animation: rollIn 1s; }
.my-hover-roll-out:hover { animation: rollOut 1s; }
/* Focus Animation Combinations */
.my-focus-fade-in-up:focus { animation: fadeInUp 0.6s ease-out; }
.my-focus-fade-in-down:focus { animation: fadeInDown 0.6s ease-out; }
.my-focus-fade-in-left:focus { animation: fadeInLeft 0.6s ease-out; }
.my-focus-fade-in-right:focus { animation: fadeInRight 0.6s ease-out; }
.my-focus-fade-out-up:focus { animation: fadeOutUp 0.6s ease-out; }
.my-focus-fade-out-down:focus { animation: fadeOutDown 0.6s ease-out; }
.my-focus-fade-out-left:focus { animation: fadeOutLeft 0.6s ease-out; }
.my-focus-fade-out-right:focus { animation: fadeOutRight 0.6s ease-out; }
.my-focus-slide-in-up:focus { animation: slideInUp 0.6s ease-out; }
.my-focus-slide-in-down:focus { animation: slideInDown 0.6s ease-out; }
.my-focus-slide-in-left:focus { animation: slideInLeft 0.6s ease-out; }
.my-focus-slide-in-right:focus { animation: slideInRight 0.6s ease-out; }
.my-focus-slide-out-up:focus { animation: slideOutUp 0.6s ease-out; }
.my-focus-slide-out-down:focus { animation: slideOutDown 0.6s ease-out; }
.my-focus-slide-out-left:focus { animation: slideOutLeft 0.6s ease-out; }
.my-focus-slide-out-right:focus { animation: slideOutRight 0.6s ease-out; }
.my-focus-zoom-in-up:focus { animation: zoomInUp 0.6s ease-out; }
.my-focus-zoom-in-down:focus { animation: zoomInDown 0.6s ease-out; }
.my-focus-zoom-in-left:focus { animation: zoomInLeft 0.6s ease-out; }
.my-focus-zoom-in-right:focus { animation: zoomInRight 0.6s ease-out; }
.my-focus-zoom-out-up:focus { animation: zoomOutUp 0.6s ease-out; }
.my-focus-zoom-out-down:focus { animation: zoomOutDown 0.6s ease-out; }
.my-focus-zoom-out-left:focus { animation: zoomOutLeft 0.6s ease-out; }
.my-focus-zoom-out-right:focus { animation: zoomOutRight 0.6s ease-out; }
.my-focus-rotate-in:focus { animation: rotateIn 0.6s ease-out; }
.my-focus-rotate-out:focus { animation: rotateOut 0.6s ease-out; }
.my-focus-flip-in:focus { animation: flipIn 0.6s ease-out; }
.my-focus-flip-out:focus { animation: flipOut 0.6s ease-out; }
.my-focus-bounce-in:focus { animation: bounceIn 0.6s ease-out; }
.my-focus-bounce-out:focus { animation: bounceOut 0.6s ease-out; }
.my-focus-shake:focus { animation: shake 0.6s ease-in-out; }
.my-focus-wobble:focus { animation: wobble 0.6s ease-in-out; }
.my-focus-heartbeat:focus { animation: heartbeat 1.5s ease-in-out infinite; }
.my-focus-rubber-band:focus { animation: rubberBand 1s; }
.my-focus-tada:focus { animation: tada 1s; }
.my-focus-jello:focus { animation: jello 1s; }
.my-focus-flash:focus { animation: flash 1s; }
.my-focus-swing:focus { animation: swing 1s; }
.my-focus-hinge:focus { animation: hinge 2s; }
.my-focus-jack-in-the-box:focus { animation: jackInTheBox 1s; }
.my-focus-light-speed-in:focus { animation: lightSpeedIn 1s; }
.my-focus-light-speed-out:focus { animation: lightSpeedOut 1s; }
.my-focus-roll-in:focus { animation: rollIn 1s; }
.my-focus-roll-out:focus { animation: rollOut 1s; }
/* Active Animation Combinations */
.my-active-fade-in-up:active { animation: fadeInUp 0.6s ease-out; }
.my-active-fade-in-down:active { animation: fadeInDown 0.6s ease-out; }
.my-active-fade-in-left:active { animation: fadeInLeft 0.6s ease-out; }
.my-active-fade-in-right:active { animation: fadeInRight 0.6s ease-out; }
.my-active-fade-out-up:active { animation: fadeOutUp 0.6s ease-out; }
.my-active-fade-out-down:active { animation: fadeOutDown 0.6s ease-out; }
.my-active-fade-out-left:active { animation: fadeOutLeft 0.6s ease-out; }
.my-active-fade-out-right:active { animation: fadeOutRight 0.6s ease-out; }
.my-active-slide-in-up:active { animation: slideInUp 0.6s ease-out; }
.my-active-slide-in-down:active { animation: slideInDown 0.6s ease-out; }
.my-active-slide-in-left:active { animation: slideInLeft 0.6s ease-out; }
.my-active-slide-in-right:active { animation: slideInRight 0.6s ease-out; }
.my-active-slide-out-up:active { animation: slideOutUp 0.6s ease-out; }
.my-active-slide-out-down:active { animation: slideOutDown 0.6s ease-out; }
.my-active-slide-out-left:active { animation: slideOutLeft 0.6s ease-out; }
.my-active-slide-out-right:active { animation: slideOutRight 0.6s ease-out; }
.my-active-zoom-in-up:active { animation: zoomInUp 0.6s ease-out; }
.my-active-zoom-in-down:active { animation: zoomInDown 0.6s ease-out; }
.my-active-zoom-in-left:active { animation: zoomInLeft 0.6s ease-out; }
.my-active-zoom-in-right:active { animation: zoomInRight 0.6s ease-out; }
.my-active-zoom-out-up:active { animation: zoomOutUp 0.6s ease-out; }
.my-active-zoom-out-down:active { animation: zoomOutDown 0.6s ease-out; }
.my-active-zoom-out-left:active { animation: zoomOutLeft 0.6s ease-out; }
.my-active-zoom-out-right:active { animation: zoomOutRight 0.6s ease-out; }
.my-active-rotate-in:active { animation: rotateIn 0.6s ease-out; }
.my-active-rotate-out:active { animation: rotateOut 0.6s ease-out; }
.my-active-flip-in:active { animation: flipIn 0.6s ease-out; }
.my-active-flip-out:active { animation: flipOut 0.6s ease-out; }
.my-active-bounce-in:active { animation: bounceIn 0.6s ease-out; }
.my-active-bounce-out:active { animation: bounceOut 0.6s ease-out; }
.my-active-shake:active { animation: shake 0.6s ease-in-out; }
.my-active-wobble:active { animation: wobble 0.6s ease-in-out; }
.my-active-heartbeat:active { animation: heartbeat 1.5s ease-in-out infinite; }
.my-active-rubber-band:active { animation: rubberBand 1s; }
.my-active-tada:active { animation: tada 1s; }
.my-active-jello:active { animation: jello 1s; }
.my-active-flash:active { animation: flash 1s; }
.my-active-swing:active { animation: swing 1s; }
.my-active-hinge:active { animation: hinge 2s; }
.my-active-jack-in-the-box:active { animation: jackInTheBox 1s; }
.my-active-light-speed-in:active { animation: lightSpeedIn 1s; }
.my-active-light-speed-out:active { animation: lightSpeedOut 1s; }
.my-active-roll-in:active { animation: rollIn 1s; }
.my-active-roll-out:active { animation: rollOut 1s; }
/* Hover Versions */
.my-hover-heartbeat:hover { animation: heartbeat 1.5s ease-in-out infinite; }
.my-hover-rubber-band:hover { animation: rubberBand 1s; }
.my-hover-tada:hover { animation: tada 1s; }
.my-hover-jello:hover { animation: jello 1s; }
.my-hover-flash:hover { animation: flash 1s; }
.my-hover-swing:hover { animation: swing 1s; }
.my-hover-hinge:hover { animation: hinge 2s; }
.my-hover-jack-in-the-box:hover { animation: jackInTheBox 1s; }
.my-hover-light-speed-in:hover { animation: lightSpeedIn 1s; }
.my-hover-light-speed-out:hover { animation: lightSpeedOut 1s; }
.my-hover-roll-in:hover { animation: rollIn 1s; }
.my-hover-roll-out:hover { animation: rollOut 1s; }
.my-hover-zoom-in-up:hover { animation: zoomInUp 1s; }
.my-hover-zoom-in-down:hover { animation: zoomInDown 1s; }