167 lines
2.8 KiB
CSS
167 lines
2.8 KiB
CSS
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes fade-in-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in-down {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-24px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-left {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-24px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-right {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(24px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes scale-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes glow-pulse {
|
|
0%, 100% {
|
|
box-shadow: 0 0 8px hsl(12 76% 48% / 0.3);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 24px hsl(12 76% 48% / 0.6);
|
|
}
|
|
}
|
|
|
|
@keyframes spin-slow {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes bounce-subtle {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-4px); }
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
/* Utility classes for animations */
|
|
.animate-fade-in {
|
|
animation: fade-in 0.5s var(--ease-out-expo) both;
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
animation: fade-in-up 0.6s var(--ease-out-expo) both;
|
|
}
|
|
|
|
.animate-fade-in-down {
|
|
animation: fade-in-down 0.6s var(--ease-out-expo) both;
|
|
}
|
|
|
|
.animate-slide-in-left {
|
|
animation: slide-in-left 0.5s var(--ease-out-expo) both;
|
|
}
|
|
|
|
.animate-slide-in-right {
|
|
animation: slide-in-right 0.5s var(--ease-out-expo) both;
|
|
}
|
|
|
|
.animate-scale-in {
|
|
animation: scale-in 0.4s var(--ease-out-expo) both;
|
|
}
|
|
|
|
.animate-glow-pulse {
|
|
animation: glow-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Staggered animation delays */
|
|
.stagger-1 { animation-delay: 0.1s; }
|
|
.stagger-2 { animation-delay: 0.2s; }
|
|
.stagger-3 { animation-delay: 0.3s; }
|
|
.stagger-4 { animation-delay: 0.4s; }
|
|
.stagger-5 { animation-delay: 0.5s; }
|
|
|
|
/* Scroll reveal base state */
|
|
.scroll-reveal {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
transition: opacity 0.6s var(--ease-out-expo),
|
|
transform 0.6s var(--ease-out-expo);
|
|
}
|
|
|
|
.scroll-reveal.is-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Book Player 3D animations */
|
|
@keyframes fade-scale-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes book-open {
|
|
from {
|
|
transform: rotateY(0deg);
|
|
}
|
|
to {
|
|
transform: rotateY(-180deg);
|
|
}
|
|
}
|
|
|
|
@keyframes page-turn {
|
|
0% {
|
|
transform: rotateY(0deg);
|
|
}
|
|
100% {
|
|
transform: rotateY(-180deg);
|
|
}
|
|
}
|
|
|
|
.animate-fade-scale-in {
|
|
animation: fade-scale-in 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) both;
|
|
}
|