From e39391cfb0739b2481c0cf300eb58f458b0ac437 Mon Sep 17 00:00:00 2001 From: "Apple\\Apple" Date: Tue, 3 Jun 2025 00:12:50 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(ui):=20enhance=20fade-in=20ani?= =?UTF-8?q?mation=20effect=20for=20streaming=20text=20rendering?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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. --- web/src/components/common/markdown/markdown.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/web/src/components/common/markdown/markdown.css b/web/src/components/common/markdown/markdown.css index 815b1d18..3b5c1067 100644 --- a/web/src/components/common/markdown/markdown.css +++ b/web/src/components/common/markdown/markdown.css @@ -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; } \ No newline at end of file