✨ feat(ui): enhance fade-in animation effect for streaming text rendering
- Add multi-dimensional animation with translateY, scale, and blur transforms - Introduce 60% keyframe for smoother animation progression - Extend animation duration from 0.4s to 0.6s for better visual impact - Apply cubic-bezier(0.22, 1, 0.36, 1) easing for more natural motion - Add will-change property to optimize rendering performance - Improve perceived responsiveness during AI response streaming The enhanced animation now provides a more polished and engaging user experience when AI responses are being streamed, with text appearing smoothly from bottom-up with subtle scaling and blur effects.
This commit is contained in:
@@ -424,13 +424,21 @@ pre:hover .copy-code-button {
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(6px) scale(0.98);
|
||||
filter: blur(3px);
|
||||
}
|
||||
60% {
|
||||
opacity: 0.85;
|
||||
filter: blur(0.5px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.4s ease-in-out both;
|
||||
animation: fade-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
Reference in New Issue
Block a user