perf(ux): improve LQIP fade in effect
This commit is contained in:
parent
7c23a4ebc5
commit
003e7b60c9
1 changed files with 10 additions and 13 deletions
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue