perf(ux): improve LQIP fade in effect

cotes2020 · May 12, 2023 · 003e7b6 · 003e7b6
1 parent 7c23a4e
commit 003e7b6
Showing 1 changed file with 10 additions and 13 deletions.
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
@@ -85,13 +85,9 @@ a {
 img {
   max-width: 100%;
   height: auto;
+  transition: all 0.35s ease-in-out;
 
   &[data-src] {
-    &.lazyloaded {
-      -webkit-animation: fade-in 0.4s ease-in;
-      animation: fade-in 0.4s ease-in;
-    }
-
     &[data-lqip='true'] {
       &.lazyload,
       &.lazyloading {
@@ -105,6 +101,11 @@ img {
       &.lazyloading {
         background: var(--img-bg);
       }
+
+      &.lazyloaded {
+        -webkit-animation: fade-in 0.35s ease-in;
+        animation: fade-in 0.35s ease-in;
+      }
     }
 
     &.shadow {
@@ -946,17 +947,13 @@ $sidebar-display: 'sidebar-display';
 } /* #sidebar */
 
 @media (hover: hover) {
-  .card.post-preview {
-    transition: all 0.35s ease-in-out;
-
-    img {
-      transition: all 0.35s ease-in-out;
-    }
-  }
-
   #sidebar ul > li:last-child::after {
     transition: top 0.5s ease;
   }
+
+  .post-preview {
+    transition: background-color 0.35s ease-in-out;
+  }
 }
 
 .profile-wrapper {