Ad-closeNN/blog-fuwari
1
0
Fork 0
mirror of https://github.com/Ad-closeNN/blog-fuwari.git synced 2026-05-31 01:20:06 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): PostCard 过渡动画

Browse Source
This commit is contained in:
Ad-closeNN
2026-04-19 23:27:22 +08:00
parent 65dc754cae
commit 9d7af32e25
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/transition.css
+10 -6
View File
@@ -1,27 +1,31 @@
/* Page transition animations with Swup */ /* Page transition animations with Swup */
html.is-changing .transition-swup-fade { html.is-changing .transition-swup-fade {
@apply transition-all duration-200 transition-property: opacity, transform;
transition-duration: 180ms;
transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
} }
html.is-animating .transition-swup-fade { html.is-animating .transition-swup-fade {
@apply opacity-0 translate-y-4 opacity: 0;
transform: scale(0.985);
} }
/* Fade-in animations for components */ /* Fade-in animations for components */
@keyframes fade-in-up { @keyframes fade-in-soft {
0% { 0% {
transform: translateY(2rem);
opacity: 0; opacity: 0;
transform: scale(0.992);
} }
100% { 100% {
transform: translateY(0);
opacity: 1; opacity: 1;
transform: scale(1);
} }
} }
/* Main components */ /* Main components */
.onload-animation { .onload-animation {
opacity: 0; opacity: 0;
animation: 300ms fade-in-up; animation: 220ms fade-in-soft cubic-bezier(0.22, 1, 0.36, 1);
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
#navbar { #navbar {