diff --git a/web/src/client/styles.css b/web/src/client/styles.css index 458cf029..eaaeca9b 100644 --- a/web/src/client/styles.css +++ b/web/src/client/styles.css @@ -796,10 +796,20 @@ body { animation: expand-from-button 0.15s cubic-bezier(0.4, 0, 0.2, 1); } - ::view-transition-old(create-session-button) { + ::view-transition-old(create-session-modal) { animation: shrink-to-button 0.15s cubic-bezier(0.4, 0, 0.2, 1); } + /* Hide button during forward transition */ + ::view-transition-old(create-session-button) { + animation: fade-out 0.15s ease-out; + } + + /* Show button during reverse transition */ + ::view-transition-new(create-session-button) { + animation: fade-in 0.15s ease-out; + } + /* Make button invisible during transition */ .vt-create-button { contain: layout; @@ -818,4 +828,13 @@ body { opacity: 1; } } + + @keyframes fade-out { + from { + opacity: 1; + } + to { + opacity: 0; + } + } }