Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Replace transition with css animation #903

Open
wants to merge 3 commits into
base: gh-pages
Choose a base branch
from
Open

Replace transition with css animation #903

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ea3133d
Replace transition with css animation
erikyo Jun 12, 2021
2a8526d
Update README.md
erikyo Jun 12, 2021
41c0c0d
Updated fade-in effect with css filter (opacity)
erikyo Aug 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 15 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,23 +277,31 @@ lazysizes adds the class ``lazyloading`` while the images are loading and the cl
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 300ms;
animation: lazyFadeIn linear .3s;
}
@keyframes lazyFadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
```

```css
/* fade image in while loading and show a spinner as background image (good for progressive images) */

.lazyload {
opacity: 0;
[data-src] {
filter: opacity(0);
}

.lazyloading {
opacity: 1;
transition: opacity 300ms;
filter: opacity(1);
background: #f7f7f7 url(loader.gif) no-repeat center;
}
.lazyloaded {
animation: lazyFadeIn linear .3s;
}
@keyframes lazyFadeIn {
0% {filter: opacity(0);}
100% {filter: opacity(1);}
}
```

### Broken image symbol
Expand Down