Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use @ scroll-timeline for css. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

@ scroll-timeline1. Basic concept

The @ scroll-timeline attribute defines an AnimationTimeline whose time value is determined by the scrolling progress in the scrolling container (not by the time). Once specified, @ scroll-timeline will be associated with the CSS Animation by using the animation-timeline attribute.

two。 Usage

Here's a simple example:

/ * set Keyframe animation * / @ keyframes slide {to {transform: translateX (calc (100vw-2rem));}} / * configure scroll timeline, which is named slide-timeline * / @ scroll-timeline slide-timeline {source: auto; orientation: vertical; scroll-offsets: 0%, 100%; / * specify Keyframe animation and scroll-timeline * / .animated-element {animation: 1s linear forwards slide slide-timeline;}

We can also use element-based offsets for the scroll-offsets attribute to trigger timeline when a particular element scrolls into the view:

@ scroll-timeline slide-timeline {scroll-offsets: selector (# element) end 0, selector (# element) start 1;} 3. Current state

If you are interested in @ scroll-timeline, you can use flag in Chrome to enable it. When we encounter a complex animation, we may need to use the JavaScript animation library to achieve it, but for relatively simple animation, using this attribute can reduce unnecessary import.

This is the end of the article on "how to use css @ scroll-timeline". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.