|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.loading { |
|
|
display: inline-block; |
|
|
width: 1.1rem; |
|
|
height: 1.1rem; |
|
|
border: 2px solid #999; |
|
|
border-top-color: transparent; |
|
|
border-radius: 50%; |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
to { |
|
|
transform: rotate(360deg); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
to { |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes fadeInDown { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(-20px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes slideInUp { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); |
|
|
} |
|
|
70% { |
|
|
box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); |
|
|
} |
|
|
100% { |
|
|
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
.floating-animation { |
|
|
animation: floating 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes floating { |
|
|
0% { |
|
|
transform: translateY(0px); |
|
|
} |
|
|
50% { |
|
|
transform: translateY(-10px); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(0px); |
|
|
} |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
} |
|
|
|
|
|
.typing-animation::after { |
|
|
content: "|"; |
|
|
animation: blink 1s infinite; |
|
|
margin-left: 2px; |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0; } |
|
|
} |
|
|
|
|
|
.shine-effect { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.shine-effect::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); |
|
|
transition: 0.5s; |
|
|
} |
|
|
|
|
|
.shine-effect:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.bounce-in { |
|
|
animation: bounceIn 0.6s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes bounceIn { |
|
|
0% { |
|
|
transform: scale(0.8); |
|
|
opacity: 0; |
|
|
} |
|
|
50% { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
100% { |
|
|
transform: scale(1); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.slide-in-left { |
|
|
animation: slideInLeft 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes slideInLeft { |
|
|
from { |
|
|
transform: translateX(-100%); |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
transform: translateX(0); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.slide-in-right { |
|
|
animation: slideInRight 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes slideInRight { |
|
|
from { |
|
|
transform: translateX(100%); |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
transform: translateX(0); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.zoom-in { |
|
|
animation: zoomIn 0.4s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes zoomIn { |
|
|
from { |
|
|
transform: scale(0.8); |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
transform: scale(1); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.flip-in { |
|
|
animation: flipIn 0.6s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes flipIn { |
|
|
from { |
|
|
transform: rotateY(90deg); |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
transform: rotateY(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.fade-in-up { |
|
|
animation: fadeInUp 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeInUp { |
|
|
from { |
|
|
transform: translateY(20px); |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.fade-in-down { |
|
|
animation: fadeInDown 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeInDown { |
|
|
from { |
|
|
transform: translateY(-20px); |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.rotate-in { |
|
|
animation: rotateIn 0.6s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes rotateIn { |
|
|
from { |
|
|
transform: rotate(15deg); |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
transform: rotate(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.scale-pulse { |
|
|
animation: scalePulse 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes scalePulse { |
|
|
0%, 100% { |
|
|
transform: scale(1); |
|
|
} |
|
|
50% { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
} |
|
|
|
|
|
.wave-animation { |
|
|
animation: wave 2s infinite linear; |
|
|
} |
|
|
|
|
|
@keyframes wave { |
|
|
0% { |
|
|
background-position: 0 0; |
|
|
} |
|
|
100% { |
|
|
background-position: 100% 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.glow-effect { |
|
|
box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); |
|
|
transition: box-shadow 0.3s ease; |
|
|
} |
|
|
|
|
|
.glow-effect:hover { |
|
|
box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); |
|
|
} |
|
|
|
|
|
.neon-glow { |
|
|
text-shadow: 0 0 5px #3b82f6, 0 0 10px #3b82f6, 0 0 15px #3b82f6, 0 0 20px #3b82f6; |
|
|
animation: neonPulse 2s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes neonPulse { |
|
|
from { |
|
|
text-shadow: 0 0 5px #3b82f6, 0 0 10px #3b82f6, 0 0 15px #3b82f6, 0 0 20px #3b82f6; |
|
|
} |
|
|
to { |
|
|
text-shadow: 0 0 10px #3b82f6, 0 0 20px #3b82f6, 0 0 30px #3b82f6, 0 0 40px #3b82f6; |
|
|
} |
|
|
} |
|
|
|
|
|
.rainbow-text { |
|
|
background: linear-gradient(90deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080); |
|
|
background-size: 200% 200%; |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
animation: rainbow 3s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes rainbow { |
|
|
0% { |
|
|
background-position: 0% 50%; |
|
|
} |
|
|
100% { |
|
|
background-position: 200% 50%; |
|
|
} |
|
|
} |
|
|
|
|
|
.hologram-effect { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.hologram-effect::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, transparent 75%, transparent); |
|
|
background-size: 20px 20px; |
|
|
animation: hologram 1s linear infinite; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
@keyframes hologram { |
|
|
0% { |
|
|
background-position: 0 0; |
|
|
} |
|
|
100% { |
|
|
background-position: 20px 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
.matrix-effect { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.matrix-effect::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(rgba(0, 255, 0, 0.1) 50%, transparent 50%); |
|
|
background-size: 100% 4px; |
|
|
animation: matrix 0.5s linear infinite; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
@keyframes matrix { |
|
|
0% { |
|
|
background-position: 0 0; |
|
|
} |
|
|
100% { |
|
|
background-position: 0 4px; |
|
|
} |
|
|
} |
|
|
|
|
|
.glass-effect { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.text-glow { |
|
|
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); |
|
|
transition: text-shadow 0.3s ease; |
|
|
} |
|
|
|
|
|
.text-glow:hover { |
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); |
|
|
} |
|
|
|
|
|
.border-glow { |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
transition: border-color 0.3s ease; |
|
|
} |
|
|
|
|
|
.border-glow:hover { |
|
|
border-color: rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
|
|
|
.shadow-glow { |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
transition: box-shadow 0.3s ease; |
|
|
} |
|
|
|
|
|
.shadow-glow:hover { |
|
|
box-shadow: 0 8px 15px rgba(59, 130, 246, 0.3); |
|
|
} |
|
|
|
|
|
.pulse-glow { |
|
|
animation: pulseGlow 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulseGlow { |
|
|
0% { |
|
|
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); |
|
|
} |
|
|
70% { |
|
|
box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); |
|
|
} |
|
|
100% { |
|
|
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
.floating-glow { |
|
|
animation: floatingGlow 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes floatingGlow { |
|
|
0% { |
|
|
transform: translateY(0); |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
50% { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(0); |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
} |
|
|
|
|
|
.rotate-glow { |
|
|
animation: rotateGlow 4s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes rotateGlow { |
|
|
0% { |
|
|
transform: rotate(0deg); |
|
|
box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
25% { |
|
|
box-shadow: 5px 0 5px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
50% { |
|
|
box-shadow: 0 -5px 5px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
75% { |
|
|
box-shadow: -5px 0 5px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
100% { |
|
|
transform: rotate(360deg); |
|
|
box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
} |
|
|
|
|
|
.wave-glow { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.wave-glow::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent); |
|
|
animation: waveGlow 2s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes waveGlow { |
|
|
0% { |
|
|
left: -100%; |
|
|
} |
|
|
100% { |
|
|
left: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
.sparkle { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.sparkle::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: -2px; |
|
|
right: -2px; |
|
|
width: 6px; |
|
|
height: 6px; |
|
|
background: #fff; |
|
|
border-radius: 50%; |
|
|
box-shadow: 0 0 10px #fff, 0 0 20px #fff; |
|
|
animation: sparkle 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes sparkle { |
|
|
0%, 100% { |
|
|
opacity: 0; |
|
|
} |
|
|
50% { |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.shimmer { |
|
|
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%); |
|
|
background-size: 200% 100%; |
|
|
animation: shimmer 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes shimmer { |
|
|
0% { |
|
|
background-position: -200% 0; |
|
|
} |
|
|
100% { |
|
|
background-position: 200% 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.ripple { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.ripple::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
width: 0; |
|
|
height: 0; |
|
|
border-radius: 50%; |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
transform: translate(-50%, -50%); |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
.ripple:active::after { |
|
|
width: 200px; |
|
|
height: 200px; |
|
|
opacity: 1; |
|
|
transition: width 0.3s, height 0.3s, opacity 0.3s; |
|
|
} |
|
|
|
|
|
.morph { |
|
|
transition: all 0.3s ease; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.morph:hover { |
|
|
border-radius: 20px; |
|
|
} |
|
|
|
|
|
.tilt { |
|
|
transition: transform 0.3s ease; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
|
|
|
.tilt:hover { |
|
|
transform: rotateY(10deg) rotateX(10deg); |
|
|
} |
|
|
|
|
|
.pop { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.pop:active { |
|
|
transform: scale(0.95); |
|
|
} |
|
|
|
|
|
.skew { |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.skew:hover { |
|
|
transform: skew(-5deg); |
|
|
} |
|
|
|
|
|
.stretch { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.stretch:hover { |
|
|
transform: scaleX(1.05); |
|
|
} |
|
|
|
|
|
.compress { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.compress:hover { |
|
|
transform: scaleY(0.95); |
|
|
} |
|
|
|
|
|
.swing { |
|
|
transition: transform 0.3s ease; |
|
|
transform-origin: top center; |
|
|
} |
|
|
|
|
|
.swing:hover { |
|
|
transform: rotate(5deg); |
|
|
} |
|
|
|
|
|
.wobble { |
|
|
animation: wobble 1s ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes wobble { |
|
|
0%, 100% { |
|
|
transform: translateX(0); |
|
|
} |
|
|
25% { |
|
|
transform: translateX(-10px); |
|
|
} |
|
|
75% { |
|
|
transform: translateX(10px); |
|
|
} |
|
|
} |
|
|
|
|
|
.jello { |
|
|
animation: jello 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes jello { |
|
|
0%, 100% { |
|
|
transform: scale(1, 1); |
|
|
} |
|
|
25% { |
|
|
transform: scale(1.1, 0.9); |
|
|
} |
|
|
50% { |
|
|
transform: scale(0.9, 1.1); |
|
|
} |
|
|
75% { |
|
|
transform: scale(1.05, 0.95); |
|
|
} |
|
|
} |
|
|
|
|
|
.heartbeat { |
|
|
animation: heartbeat 1.5s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes heartbeat { |
|
|
0%, 100% { |
|
|
transform: scale(1); |
|
|
} |
|
|
50% { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
} |
|
|
|
|
|
.bounce { |
|
|
animation: bounce 1s infinite; |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
50% { |
|
|
transform: translateY(-20px); |
|
|
} |
|
|
} |
|
|
|
|
|
.flip { |
|
|
animation: flip 1s ease; |
|
|
} |
|
|
|
|
|
@keyframes flip { |
|
|
0% { |
|
|
transform: rotateY(0deg); |
|
|
} |
|
|
100% { |
|
|
transform: rotateY(360deg); |
|
|
} |
|
|
} |
|
|
|
|
|
.roll { |
|
|
animation: roll 1s ease; |
|
|
} |
|
|
|
|
|
@keyframes roll { |
|
|
0% { |
|
|
transform: rotate(0deg); |
|
|
} |
|
|
100% { |
|
|
transform: rotate(360deg); |
|
|
} |
|
|
} |
|
|
|
|
|
.rubberBand { |
|
|
animation: rubberBand 1s ease; |
|
|
} |
|
|
|
|
|
@keyframes rubberBand { |
|
|
0%, 100% { |
|
|
transform: scale(1, 1); |
|
|
} |
|
|
30% { |
|
|
transform: scaleX(1.25) scaleY(0.75); |
|
|
} |
|
|
40% { |
|
|
transform: scaleX(0.75) scaleY(1.25); |
|
|
} |
|
|
60% { |
|
|
transform: scaleX(1.15) scaleY(0.85); |
|
|
} |
|
|
} |
|
|
|
|
|
.shake { |
|
|
animation: shake 0.5s ease; |
|
|
} |
|
|
|
|
|
@keyframes shake { |
|
|
0%, 100% { |
|
|
transform: translateX(0); |
|
|
} |
|
|
25% { |
|
|
transform: translateX(-5px); |
|
|
} |
|
|
75% { |
|
|
transform: translateX(5px); |
|
|
} |
|
|
} |
|
|
|
|
|
.tada { |
|
|
animation: tada 1s ease; |
|
|
} |
|
|
|
|
|
@keyframes tada { |
|
|
0%, 100% { |
|
|
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); |
|
|
} |
|
|
} |
|
|
|
|
|
.lightSpeedIn { |
|
|
animation: lightSpeedIn 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes lightSpeedIn { |
|
|
0% { |
|
|
transform: translateX(100%) skewX(-30deg); |
|
|
opacity: 0; |
|
|
} |
|
|
60% { |
|
|
transform: translateX(-20%) skewX(30deg); |
|
|
opacity: 1; |
|
|
} |
|
|
80% { |
|
|
transform: translateX(0%) skewX(-15deg); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateX(0%) skewX(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.lightSpeedOut { |
|
|
animation: lightSpeedOut 0.5s ease-in; |
|
|
} |
|
|
|
|
|
@keyframes lightSpeedOut { |
|
|
0% { |
|
|
transform: translateX(0%) skewX(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateX(100%) skewX(-30deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.rotateInDownLeft { |
|
|
animation: rotateInDownLeft 0.6s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes rotateInDownLeft { |
|
|
0% { |
|
|
transform-origin: left bottom; |
|
|
transform: rotate(-90deg); |
|
|
opacity: 0; |
|
|
} |
|
|
100% { |
|
|
transform-origin: left bottom; |
|
|
transform: rotate(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.rotateInDownRight { |
|
|
animation: rotateInDownRight 0.6s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes rotateInDownRight { |
|
|
0% { |
|
|
transform-origin: right bottom; |
|
|
transform: rotate(90deg); |
|
|
opacity: 0; |
|
|
} |
|
|
100% { |
|
|
transform-origin: right bottom; |
|
|
transform: rotate(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.rotateInUpLeft { |
|
|
animation: rotateInUpLeft 0.6s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes rotateInUpLeft { |
|
|
0% { |
|
|
transform-origin: left bottom; |
|
|
transform: rotate(90deg); |
|
|
opacity: 0; |
|
|
} |
|
|
100% { |
|
|
transform-origin: left bottom; |
|
|
transform: rotate(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.rotateInUpRight { |
|
|
animation: rotateInUpRight 0.6s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes rotateInUpRight { |
|
|
0% { |
|
|
transform-origin: right bottom; |
|
|
transform: rotate(-90deg); |
|
|
opacity: 0; |
|
|
} |
|
|
100% { |
|
|
transform-origin: right bottom; |
|
|
transform: rotate(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.hinge { |
|
|
animation: hinge 2s ease; |
|
|
} |
|
|
|
|
|
@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: translateY(700px); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.jackInTheBox { |
|
|
animation: jackInTheBox 0.7s ease; |
|
|
} |
|
|
|
|
|
@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); |
|
|
} |
|
|
} |
|
|
|
|
|
.rollIn { |
|
|
animation: rollIn 0.7s ease; |
|
|
} |
|
|
|
|
|
@keyframes rollIn { |
|
|
0% { |
|
|
opacity: 0; |
|
|
transform: translateX(-100%) rotate(-120deg); |
|
|
} |
|
|
100% { |
|
|
opacity: 1; |
|
|
transform: translateX(0) rotate(0deg); |
|
|
} |
|
|
} |
|
|
|
|
|
.rollOut { |
|
|
animation: rollOut 0.7s ease; |
|
|
} |
|
|
|
|
|
@keyframes rollOut { |
|
|
0% { |
|
|
opacity: 1; |
|
|
transform: translateX(0) rotate(0deg); |
|
|
} |
|
|
100% { |
|
|
opacity: 0; |
|
|
transform: translateX(100%) rotate(120deg); |
|
|
} |
|
|
} |
|
|
|
|
|
.zoomInDown { |
|
|
animation: zoomInDown 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes zoomInDown { |
|
|
0% { |
|
|
opacity: 0; |
|
|
transform: scale(0.1) translateY(-1000px); |
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); |
|
|
} |
|
|
60% { |
|
|
opacity: 1; |
|
|
transform: scale(0.475) translateY(60px); |
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); |
|
|
} |
|
|
} |
|
|
|
|
|
.zoomInLeft { |
|
|
animation: zoomInLeft 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes zoomInLeft { |
|
|
0% { |
|
|
opacity: 0; |
|
|
transform: scale(0.1) translateX(-1000px); |
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); |
|
|
} |
|
|
60% { |
|
|
opacity: 1; |
|
|
transform: scale(0.475) translateX(10px); |
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); |
|
|
} |
|
|
} |
|
|
|
|
|
.zoomInRight { |
|
|
animation: zoomInRight 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes zoomInRight { |
|
|
0% { |
|
|
opacity: 0; |
|
|
transform: scale(0.1) translateX(1000px); |
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); |
|
|
} |
|
|
60% { |
|
|
opacity: 1; |
|
|
transform: scale(0.475) translateX(-10px); |
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); |
|
|
} |
|
|
} |
|
|
|
|
|
.zoomInUp { |
|
|
animation: zoomInUp 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes zoomInUp { |
|
|
0% { |
|
|
opacity: 0; |
|
|
transform: scale(0.1) translateY(1000px); |
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); |
|
|
} |
|
|
60% { |
|
|
opacity: 1; |
|
|
transform: scale(0.475) translateY(-60px); |
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); |
|
|
} |
|
|
} |
|
|
|
|
|
.zoomOut { |
|
|
animation: zoomOut 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes zoomOut { |
|
|
0% { |
|
|
opacity: 1; |
|
|
transform: scale(1); |
|
|
} |
|
|
50% { |
|
|
opacity: 0; |
|
|
transform: scale(0.3); |
|
|
} |
|
|
100% { |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.zoomOutDown { |
|
|
animation: zoomOutDown 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes zoomOutDown { |
|
|
40% { |
|
|
opacity: 1; |
|
|
transform: scale(0.475) translateY(-60px); |
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); |
|
|
} |
|
|
100% { |
|
|
opacity: 0; |
|
|
transform: scale(0.1) translateY(2000px); |
|
|
transform-origin: center bottom; |
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); |
|
|
} |
|
|
} |
|
|
|
|
|
.zoomOutLeft { |
|
|
animation: zoomOutLeft 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes zoomOutLeft { |
|
|
40% { |
|
|
opacity: 1; |
|
|
transform: scale(0.475) translateX(42px); |
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); |
|
|
} |
|
|
100% { |
|
|
opacity: 0; |
|
|
transform: scale(0.1) translateX(-2000px); |
|
|
transform-origin: left center; |
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); |
|
|
} |
|
|
} |
|
|
|
|
|
.zoomOutRight { |
|
|
animation: zoomOutRight 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes zoomOutRight { |
|
|
40% { |
|
|
opacity: 1; |
|
|
transform: scale(0.475) translateX(-42px); |
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); |
|
|
} |
|
|
100% { |
|
|
opacity: 0; |
|
|
transform: scale(0.1) translateX(2000px); |
|
|
transform-origin: right center; |
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); |
|
|
} |
|
|
} |
|
|
|
|
|
.zoomOutUp { |
|
|
animation: zoomOutUp 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes zoomOutUp { |
|
|
40% { |
|
|
opacity: 1; |
|
|
transform: scale(0.475) translateY(60px); |
|
|
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); |
|
|
} |
|
|
100% { |
|
|
opacity: 0; |
|
|
transform: scale(0.1) translateY(-2000px); |
|
|
transform-origin: center top; |
|
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); |
|
|
} |
|
|
} |
|
|
|
|
|
.slideInDown { |
|
|
animation: slideInDown 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes slideInDown { |
|
|
from { |
|
|
transform: translateY(-100%); |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.slideInLeft { |
|
|
animation: slideInLeft 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes slideInLeft { |
|
|
from { |
|
|
transform: translateX(-100%); |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
transform: translateX(0); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.slideInRight { |
|
|
animation: slideInRight 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes slideInRight { |
|
|
from { |
|
|
transform: translateX(100%); |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
transform: translateX(0); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.slideInUp { |
|
|
animation: slideInUp 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes slideInUp { |
|
|
from { |
|
|
transform: translateY(100%); |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.slideOutDown { |
|
|
animation: slideOutDown 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes slideOutDown { |
|
|
from { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
} |
|
|
to { |
|
|
transform: translateY(100%); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.slideOutLeft { |
|
|
animation: slideOutLeft 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes slideOutLeft { |
|
|
from { |
|
|
transform: translateX(0); |
|
|
opacity: 1; |
|
|
} |
|
|
to { |
|
|
transform: translateX(-100%); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.slideOutRight { |
|
|
animation: slideOutRight 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes slideOutRight { |
|
|
from { |
|
|
transform: translateX(0); |
|
|
opacity: 1; |
|
|
} |
|
|
to { |
|
|
transform: translateX(100%); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.slideOutUp { |
|
|
animation: slideOutUp 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes slideOutUp { |
|
|
from { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
} |
|
|
to { |
|
|
transform: translateY(-100%); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.fadeIn { |
|
|
animation: fadeIn 0.5s ease-out; |
|
|
} |
|
|
|
|
|
.fadeOut { |
|
|
animation: fadeOut 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeOut { |
|
|
from { |
|
|
opacity: 1; |
|
|
} |
|
|
to { |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.fadeInDown { |
|
|
animation: fadeInDown 0.5s ease-out; |
|
|
} |
|
|
|
|
|
.fadeOutDown { |
|
|
animation: fadeOutDown 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeOutDown { |
|
|
from { |
|
|
opacity: 1; |
|
|
} |
|
|
to { |
|
|
opacity: 0; |
|
|
transform: translateY(100%); |
|
|
} |
|
|
} |
|
|
|
|
|
.fadeInDownBig { |
|
|
animation: fadeInDownBig 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeInDownBig { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(-2000px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.fadeOutDownBig { |
|
|
animation: fadeOutDownBig 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeOutDownBig { |
|
|
from { |
|
|
opacity: 1; |
|
|
} |
|
|
to { |
|
|
opacity: 0; |
|
|
transform: translateY(2000px); |
|
|
} |
|
|
} |
|
|
|
|
|
.fadeInLeft { |
|
|
animation: fadeInLeft 0.5s ease-out; |
|
|
} |
|
|
|
|
|
.fadeOutLeft { |
|
|
animation: fadeOutLeft 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeOutLeft { |
|
|
from { |
|
|
opacity: 1; |
|
|
} |
|
|
to { |
|
|
opacity: 0; |
|
|
transform: translateX(-100%); |
|
|
} |
|
|
} |
|
|
|
|
|
.fadeInLeftBig { |
|
|
animation: fadeInLeftBig 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeInLeftBig { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateX(-2000px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.fadeOutLeftBig { |
|
|
animation: fadeOutLeftBig 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeOutLeftBig { |
|
|
from { |
|
|
opacity: 1; |
|
|
} |
|
|
to { |
|
|
opacity: 0; |
|
|
transform: translateX(-2000px); |
|
|
} |
|
|
} |
|
|
|
|
|
.fadeInRight { |
|
|
animation: fadeInRight 0.5s ease-out; |
|
|
} |
|
|
|
|
|
.fadeOutRight { |
|
|
animation: fadeOutRight 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeOutRight { |
|
|
from { |
|
|
opacity: 1; |
|
|
} |
|
|
to { |
|
|
opacity: 0; |
|
|
transform: translateX(100%); |
|
|
} |
|
|
} |
|
|
|
|
|
.fadeInRightBig { |
|
|
animation: fadeInRightBig 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeInRightBig { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateX(2000px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.fadeOutRightBig { |
|
|
animation: fadeOutRightBig 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeOutRightBig { |
|
|
from { |
|
|
opacity: 1; |
|
|
} |
|
|
to { |
|
|
opacity: 0; |
|
|
transform: translateX(2000px); |
|
|
} |
|
|
} |
|
|
|
|
|
.fadeInUp { |
|
|
animation: fadeInUp 0.5s ease-out; |
|
|
} |
|
|
|
|
|
.fadeOutUp { |
|
|
animation: fadeOutUp 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeOutUp { |
|
|
from { |
|
|
opacity: 1; |
|
|
} |
|
|
to { |
|
|
opacity: 0; |
|
|
transform: translateY(-100%); |
|
|
} |
|
|
} |
|
|
|
|
|
.fadeInUpBig { |
|
|
animation: fadeInUpBig 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeInUpBig { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(2000px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.fadeOutUpBig { |
|
|
animation: fadeOutUpBig 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeOutUpBig { |
|
|
from { |
|
|
opacity: 1; |
|
|
} |
|
|
to { |
|
|
opacity: 0; |
|
|
transform: translateY(-2000px); |
|
|
} |
|
|
} |
|
|
|
|
|
.flipInX { |
|
|
animation: flipInX 0.6s ease; |
|
|
} |
|
|
|
|
|
@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; |
|
|
} |
|
|
} |
|
|
|
|
|
.flipInY { |
|
|
animation: flipInY 0.6s ease; |
|
|
} |
|
|
|
|
|
@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; |
|
|
} |
|
|
} |
|
|
|
|
|
.flipOutX { |
|
|
animation: flipOutX 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes flipOutX { |
|
|
0% { |
|
|
transform: perspective(400px) rotateX(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: perspective(400px) rotateX(90deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.flipOutY { |
|
|
animation: flipOutY 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes flipOutY { |
|
|
0% { |
|
|
transform: perspective(400px) rotateY(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: perspective(400px) rotateY(90deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.lightSpeedInRight { |
|
|
animation: lightSpeedInRight 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes lightSpeedInRight { |
|
|
0% { |
|
|
transform: translateX(-100%) skewX(30deg); |
|
|
opacity: 0; |
|
|
} |
|
|
60% { |
|
|
transform: translateX(20%) skewX(-30deg); |
|
|
opacity: 1; |
|
|
} |
|
|
80% { |
|
|
transform: translateX(0%) skewX(15deg); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateX(0%) skewX(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.lightSpeedOutLeft { |
|
|
animation: lightSpeedOutLeft 0.5s ease-in; |
|
|
} |
|
|
|
|
|
@keyframes lightSpeedOutLeft { |
|
|
0% { |
|
|
transform: translateX(0%) skewX(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateX(-100%) skewX(30deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.lightSpeedOutRight { |
|
|
animation: lightSpeedOutRight 0.5s ease-in; |
|
|
} |
|
|
|
|
|
@keyframes lightSpeedOutRight { |
|
|
0% { |
|
|
transform: translateX(0%) skewX(0deg); |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform: translateX(100%) skewX(-30deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.rotateOut { |
|
|
animation: rotateOut 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes rotateOut { |
|
|
0% { |
|
|
transform-origin: center; |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform-origin: center; |
|
|
transform: rotate(200deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.rotateOutDownLeft { |
|
|
animation: rotateOutDownLeft 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes rotateOutDownLeft { |
|
|
0% { |
|
|
transform-origin: left bottom; |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform-origin: left bottom; |
|
|
transform: rotate(45deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.rotateOutDownRight { |
|
|
animation: rotateOutDownRight 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes rotateOutDownRight { |
|
|
0% { |
|
|
transform-origin: right bottom; |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform-origin: right bottom; |
|
|
transform: rotate(-45deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.rotateOutUpLeft { |
|
|
animation: rotateOutUpLeft 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes rotateOutUpLeft { |
|
|
0% { |
|
|
transform-origin: left bottom; |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform-origin: left bottom; |
|
|
transform: rotate(-45deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.rotateOutUpRight { |
|
|
animation: rotateOutUpRight 0.6s ease; |
|
|
} |
|
|
|
|
|
@keyframes rotateOutUpRight { |
|
|
0% { |
|
|
transform-origin: right bottom; |
|
|
opacity: 1; |
|
|
} |
|
|
100% { |
|
|
transform-origin: right bottom; |
|
|
transform: rotate(45deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
