134 lines
2.5 KiB
CSS
134 lines
2.5 KiB
CSS
/**
|
|
* MYP Platform - Optimierte einfache Animationen
|
|
* Reduzierte, performante Animationen für bessere User Experience
|
|
*/
|
|
|
|
/* ===== EINFACHE FADE-IN ANIMATION ===== */
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fade-in 0.2s ease-out;
|
|
}
|
|
|
|
/* ===== EINFACHE SLIDE-UP ANIMATION ===== */
|
|
@keyframes slide-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(15px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slide-up 0.3s ease-out;
|
|
}
|
|
|
|
.animate-slide-up-delay {
|
|
animation: slide-up 0.3s ease-out;
|
|
animation-delay: 0.1s;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.animate-slide-up-delay-2 {
|
|
animation: slide-up 0.3s ease-out;
|
|
animation-delay: 0.2s;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
/* ===== EINFACHER HOVER-EFFEKT ===== */
|
|
.animate-hover-lift {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.animate-hover-lift:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* ===== EINFACHE SUCCESS ANIMATION ===== */
|
|
@keyframes simple-success {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.animate-success {
|
|
animation: simple-success 0.3s ease-out;
|
|
}
|
|
|
|
/* ===== EINFACHER PULSE FÜR LOADING ===== */
|
|
@keyframes simple-pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
.animate-pulse-simple {
|
|
animation: simple-pulse 2s infinite ease-in-out;
|
|
}
|
|
|
|
/* ===== EINFACHER PROGRESS BAR ===== */
|
|
.progress-fill {
|
|
transition: width 1s ease-out;
|
|
}
|
|
|
|
/* ===== PERFORMANCE OPTIMIERUNGEN ===== */
|
|
.animate-fade-in,
|
|
.animate-slide-up,
|
|
.animate-slide-up-delay,
|
|
.animate-slide-up-delay-2 {
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.animate-hover-lift {
|
|
will-change: transform;
|
|
}
|
|
|
|
/* ===== UTILITY CLASSES ===== */
|
|
.animate-smooth {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.animate-smooth-fast {
|
|
transition: all 0.1s ease;
|
|
}
|
|
|
|
/* ===== RESPONSIVE ANPASSUNGEN ===== */
|
|
@media (max-width: 768px) {
|
|
.animate-fade-in,
|
|
.animate-slide-up,
|
|
.animate-slide-up-delay,
|
|
.animate-slide-up-delay-2 {
|
|
animation-duration: 0.2s;
|
|
}
|
|
}
|
|
|
|
/* ===== REDUZIERTE BEWEGUNG UNTERSTÜTZUNG ===== */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
|
|
.animate-hover-lift:hover {
|
|
transform: none;
|
|
}
|
|
} |