Skip to content

Commit

Permalink
Add fade in effect for lazy-loaded images
Browse files Browse the repository at this point in the history
  • Loading branch information
cotes2020 committed Jul 11, 2021
1 parent d19ae2c commit 1ca4c74
Showing 1 changed file with 9 additions and 0 deletions.
9 changes: 9 additions & 0 deletions _sass/addon/commons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 1ca4c74

Please sign in to comment.