39 lines
765 B
CSS
39 lines
765 B
CSS
.fade {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
transition: opacity 0.6s ease, transform 0.6s ease;
|
|
}
|
|
|
|
.fade.entered {
|
|
color: #0af;
|
|
}
|
|
|
|
.fade-in { transition: opacity 0.4s ease-out; }
|
|
.fade-out { transition: opacity 0.4s ease-in; }
|
|
.zoom-in { transition: transform 0.5s ease-out; }
|
|
|
|
/* Beispielanimation */
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-5px); }
|
|
75% { transform: translateX(5px); }
|
|
}
|
|
.shake {
|
|
animation: shake 0.8s ease-in-out;
|
|
}
|
|
|
|
|
|
|
|
.fade-in-on-scroll,
|
|
.zoom-in {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
transition: opacity 0.6s ease, transform 0.6s ease;
|
|
will-change: opacity, transform;
|
|
}
|
|
|
|
.visible {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|