wanwu/deer-flow
1
0
Fork 0
mirror of https://gitee.com/wanwujie/deer-flow synced 2026-04-20 12:54:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add animations

Browse Source
This commit is contained in:
Henry Li
2026-02-07 10:30:35 +08:00
parent c3f9089e95
commit fc543a9b30
2 changed files with 67 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/styles/globals.css
View File

@@ -85,6 +85,17 @@
}
}
--animate-fade-in-up: fade-in-up 0.15s ease-in-out forwards;
@keyframes fade-in-up {
0% {
opacity: 0;
transform: translateY(1rem) scale(1.2);
}
100% {
opacity: 1;
}
}
--animate-bouncing: bouncing 0.5s infinite alternate;
@keyframes bouncing {
to {
@@ -104,6 +115,18 @@
transform: scaleX(1);
}
}
--animate-suggestion-in: suggestion-in 0.2s ease-out forwards;
@keyframes suggestion-in {
0% {
opacity: 0;
transform: translateY(-1.25rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
}
@theme inline {
@@ -145,57 +168,42 @@
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--animate-aurora:
aurora 8s ease-in-out infinite alternate;
--animate-aurora: aurora 8s ease-in-out infinite alternate;
@keyframes aurora {
0% {
background-position:
0% 50%;
transform:
rotate(-5deg) scale(0.9);
0% {
background-position: 0% 50%;
transform: rotate(-5deg) scale(0.9);
}
25% {
background-position:
50% 100%;
transform:
rotate(5deg) scale(1.1);
25% {
background-position: 50% 100%;
transform: rotate(5deg) scale(1.1);
}
50% {
background-position:
100% 50%;
transform:
rotate(-3deg) scale(0.95);
50% {
background-position: 100% 50%;
transform: rotate(-3deg) scale(0.95);
}
75% {
background-position:
50% 0%;
transform:
rotate(3deg) scale(1.05);
75% {
background-position: 50% 0%;
transform: rotate(3deg) scale(1.05);
}
100% {
background-position:
0% 50%;
transform:
rotate(-5deg) scale(0.9);
100% {
background-position: 0% 50%;
transform: rotate(-5deg) scale(0.9);
}
}
--animate-shine:
shine var(--duration) infinite linear
;
--animate-shine: shine var(--duration) infinite linear;
@keyframes shine {
0% {
background-position:
0% 0%;
0% {
background-position: 0% 0%;
}
50% {
background-position:
100% 100%;
50% {
background-position: 100% 100%;
}
to {
background-position:
0% 0%;
to {
background-position: 0% 0%;
}
}}
}
}
:root {
--radius: 0.625rem;
@@ -297,4 +305,4 @@
--container-width-sm: calc(var(--spacing) * 144);
--container-width-md: calc(var(--spacing) * 204);
--container-width-lg: calc(var(--spacing) * 256);
}
}