핵심 사항을 빠르게 찾아보십시오.
@scroll-timeline
크롬에 표시되었습니다. Bramus는 또한 CSS 트릭 에서이 기능을 강력하게 사용하는 것을 보여줍니다. 특히 Waapi와 함께 사용될 때.prefers-reduced-motion
과 함께 사용합니다 내가 추가하고 싶은 유일한 것은 prefers-reduced-motion
속성을 고려해야한다는 것입니다.이 스크롤 애니메이션은 병에 걸리기 쉬운 사람들에게 영향을 줄 수 있기 때문입니다. 이렇게하려면 테스트를 동일한 라인의 JavaScript의 지원 테스트와 결합 할 수 있습니다.
만약에 ( ! ! wind ) { // 쿨 효과 실행}
회의를 테스트하거나 reduce
의 반대를 테스트하는 것이 더 낫지는 않습니다. 어느 쪽이든, CSS의 트릭은 @supports
테스트에서 @scroll-timeline
및 animation-timeline
으로하고 싶은 모든 것을 포장 한 다음 (다른 일을하고 싶다면) 환경 설정 테스트에서 그 테스트를 마무리하는 것입니다.
@Media (선호-감소 모션 : 예비 회의) { @Supports (Animation-Timeline : Works) { /* 멋진 효과 실행*/ } }
그것은 시연이며, 모든 크레딧은 브라 머스에게이를 수행 한 것입니다.
오, 아세요? @when
이 기능이되면 CSS는 더 간결합니다.
@When supports (애니메이션-타임 라인 : 작품) 및 미디어 (선호-감소 모션 : 비 예정) { } @또 다른 { }
위 내용은 모션 선호도가있는 CSS 스크롤 타임 라인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!