From bea170cff0b07be066384eb99645a3bc5db6bf51 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 11 Jul 2021 14:36:46 +0800
Subject: [PATCH] Add fade in effect for lazy-loaded images

---
 _sass/addon/commons.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 8c542ca..a2a7791 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -375,9 +375,18 @@ footer {
     }
   }
 
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
   img[data-src] {
     margin: 0.5rem 0;
 
+    &[data-loaded=true] {
+      animation: fade-in linear .5s;
+    }
+
     &.left {
       float: left;
       margin: 0.75rem 1rem 1rem 0;