mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-24 10:15:37 +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);
}
}
@supports (animation-timeline: scroll()) {
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
.sheet header {
animation: header-border 1s linear both;
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 {
animation: peekaboo-header 1s linear both;
animation-timeline: scroll();

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

@ -585,7 +585,7 @@
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) {
animation: bye-banner 1s linear both;
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;
padding: 8px;
@supports (animation-timeline: scroll()) {
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
animation: media-carousel-slide 1s linear both;
animation-timeline: --media-carousel;
}