Ad-closeNN/blog-fuwari
1
0
Fork 0
mirror of https://github.com/Ad-closeNN/blog-fuwari.git synced 2026-05-31 01:40:03 -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 */
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 {
@apply opacity-0 translate-y-4
opacity: 0;
transform: scale(0.985);
}
/* Fade-in animations for components */
@keyframes fade-in-up {
@keyframes fade-in-soft {
0% {
transform: translateY(2rem);
opacity: 0;
transform: scale(0.992);
}
100% {
transform: translateY(0);
opacity: 1;
transform: scale(1);
}
}
/* Main components */
.onload-animation {
opacity: 0;
animation: 300ms fade-in-up;
animation: 220ms fade-in-soft cubic-bezier(0.22, 1, 0.36, 1);
animation-fill-mode: forwards;
}
#navbar {