mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-12-18 08:32:33 +03:00
Code Issues Projects Releases Packages Wiki Activity

Better feature detection for Scroll-driven animations

Browse source 
Ref: https://www.bram.us/2024/09/24/feature-detecting-scroll-driven-animations-you-want-to-check-for-animation-range-too/
This commit is contained in:
Lim Chee Aun 2024-09-25 09:39:16 +08:00
parent f1f1fa6402
commit 1485f9e5d9
3 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app.css
View file

@ -1722,7 +1722,7 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
0 8px 16px -8px var(--drop-shadow-color); 0 8px 16px -8px var(--drop-shadow-color);
} }
} }
@supports (animation-timeline: scroll()) { @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
.sheet header { .sheet header {
animation: header-border 1s linear both; animation: header-border 1s linear both;
animation-timeline: --sheet-scroll; animation-timeline: --sheet-scroll;
@ -2363,7 +2363,7 @@ body > .szh-menu-container {
} }
} }
@supports (animation-timeline: scroll()) { @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
.header-account { .header-account {
animation: peekaboo-header 1s linear both; animation: peekaboo-header 1s linear both;
animation-timeline: scroll(); animation-timeline: scroll();

2
src/components/account-info.css
View file

@ -585,7 +585,7 @@
margin-top: calc(-1 * var(--banner-overlap)); margin-top: calc(-1 * var(--banner-overlap));
} }
@supports (animation-timeline: scroll()) { @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
.header-banner:not(.header-is-avatar):not(:hover):not(:active) { .header-banner:not(.header-is-avatar):not(:hover):not(:active) {
animation: bye-banner 1s linear both; animation: bye-banner 1s linear both;
animation-timeline: view(); animation-timeline: view();

2
src/components/status.css
View file

@ -1601,7 +1601,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
margin-top: 8px; margin-top: 8px;
padding: 8px; padding: 8px;
@supports (animation-timeline: scroll()) { @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
animation: media-carousel-slide 1s linear both; animation: media-carousel-slide 1s linear both;
animation-timeline: --media-carousel; animation-timeline: --media-carousel;
} }