Add fade in to lazyloads

swaggypiggy · Dec 27, 2020 · 0f29c14 · 0f29c14
1 parent 7cf5d48
commit 0f29c14
Showing 1 changed file with 20 additions and 0 deletions.
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -61,6 +61,26 @@
  * @import "utilities/skew-transforms";
  */
 
+
+.ease {
+    transition-property: all;
+    transition-duration: 400ms;
+    /* easeInOutQuart */
+    /* https://easings.net/en#easeInOutQuart */
+    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
+}
+
+.lazyload,
+.lazyloading {
+	opacity: 0;
+}
+.lazyloaded {
+    @apply ease;
+    transition-property: opacity;
+
+	opacity: 1;
+}
+
  .neumorphic-shadow,
  .hover\:neumorphic-shadow:hover {
     /* box-shadow: -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07); */