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 {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
transition: all 0.35s ease-in-out;
|
||||||
|
|
||||||
&[data-src] {
|
&[data-src] {
|
||||||
&.lazyloaded {
|
|
||||||
-webkit-animation: fade-in 0.4s ease-in;
|
|
||||||
animation: fade-in 0.4s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-lqip='true'] {
|
&[data-lqip='true'] {
|
||||||
&.lazyload,
|
&.lazyload,
|
||||||
&.lazyloading {
|
&.lazyloading {
|
||||||
|
@ -105,6 +101,11 @@ img {
|
||||||
&.lazyloading {
|
&.lazyloading {
|
||||||
background: var(--img-bg);
|
background: var(--img-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.lazyloaded {
|
||||||
|
-webkit-animation: fade-in 0.35s ease-in;
|
||||||
|
animation: fade-in 0.35s ease-in;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.shadow {
|
&.shadow {
|
||||||
|
@ -946,17 +947,13 @@ $sidebar-display: 'sidebar-display';
|
||||||
} /* #sidebar */
|
} /* #sidebar */
|
||||||
|
|
||||||
@media (hover: hover) {
|
@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 {
|
#sidebar ul > li:last-child::after {
|
||||||
transition: top 0.5s ease;
|
transition: top 0.5s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.post-preview {
|
||||||
|
transition: background-color 0.35s ease-in-out;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-wrapper {
|
.profile-wrapper {
|
||||||
|
|
Loading…
Reference in a new issue