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

This article mainly introduces the relevant knowledge of "how to use the new features of CSS animation @ scroll-timeline". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "how to use the new features of CSS animation @ scroll-timeline" can help you solve the problem.

In the CSS specification Scroll-linked Animations, an epoch-making CSS function is introduced. That is, The @ scroll-timeline at-rule, literally translates to scroll the timeline.

What is @ scroll-timeline scrolling timeline?

What is the @ scroll-timeline scrolling timeline?

Scroll-timeline can set the beginning and end of an animation to be determined by the progress of scrolling in the scrolling container, not by time.

It means that we can define an animation effect, and the beginning and end of the animation can be controlled by scrolling the container.

Signal DEMO

Before we systematically learn grammar, let's take a brief look at its usage through a DEMO:

Let's first implement a simple font F rotation animation:

F#g-box {animation-name: rotate; animation-duration: 3s; animation-direction: alternate; animation-easing-function: linear;} @ keyframes rotate {0% {transform: rotate (0);} 100% {transform: rotate (360deg);}}

Next, we combine this animation with @ scroll-timeline and place it in a scrollable container:

F#g-content {width: 300px; height: 170vh; background: # 999;} # g-box {font-size: 150px; margin: 70vh auto 0; animation-name: rotate; animation-duration: 3s; animation-direction: alternate; animation-easing-function: linear; animation-timeline: box-rotate;} @ keyframes rotate {0% {transform: rotate (0) } 100% {transform: rotate (360deg);} @ scroll-timeline box-rotate {source: selector ("# g-content");}

Here, we implemented a scrollable container # g-content with a height of 170vh, or 1.7 times the height of the visual interface, and placed the # g-box container at a height from the top 70vh:

Seeing here, you should be able to understand the function and meaning of @ scroll-timeline, which gives CSS the ability to control the progress of animation based on the scrolling of the scroll bar! Amazing!!

Introduction to @ scroll-timeline syntax

Next, let's take a brief look at the syntax of @ scroll-timeline.

With @ scroll-timeline, the core thing is to define a @ scroll-timeline rule:

@ scroll-timeline moveTimeline {source: selector ("# g-content"); orientation: vertical; scroll-offsets: 0px, 500px;}

Where:

Source: bind the scrolling container that triggers the scrolling animation

Source: auto: bind to Document, that is, the global Windows object

Source: selector ("id-selector"), through selector (), a # id selector is built in to select a scrollable container

Source: none: scroll container that does not refer to

Orientation: sets the direction of scrolling the timeline

Orientation: auto: default is vertical, that is, scrolling in the vertical direction

Orientation: vertical: scrolling vertically

Orientation: horizontal: horizontal scrolling

Orientation: block: less commonly used, using scrolling position along the block axis, consistent with writing mode and direction

Orientation: inline: less commonly used, using scrolling position along the inner coupling axis, consistent with writing mode and directionality

Scroll-offsets: the core of the scrolling timeline, which is set at what stage of scrolling and triggers the animation, which can be set in one of three ways:

Scroll-offsets: none this means that there is no scroll-offset specified.

Determined by a comma-separated list of length-percentage values. Each value is mapped to animation-duration. For example, if ananimation-duration is set to 2s and the scrolling offset is 0px, 30px, 100px, at 1s, the scrolling offset will be 30px.

The third way to determine the roll offset is to use the element offset. This means that you can specify elements within the page whose location determines the scrolling timeline and which edge of those elements to use. The specified element is done using the selector () function, which receives the id of the element. The edge is determined by the keyword start or end. An optional threshold of 0-1 can be used to represent the percentage expected to be visible in the element scroll.

It will be difficult to understand scroll-offsets, which we will discuss in more detail later.

After setting up an @ scroll-timeline, we just need to bind it to the animation, via animation-timeline:

@ scroll-timeline moveTimeline {source: selector ("# g-content"); orientation: vertical; scroll-offsets: 0px, 500px;} div {animation-name: move; animation-duration: 3s; animation-timeline: moveTimeline;} @ keyframes move {0% {transform: translate (0,0);} 100% {transform: translate (100%, 0);}} use @ scroll-timeline to implement scrolling progress indicator

In the previous article on the incredible pure CSS scrolling progress bar effect, we introduced a pure CSS scrolling progress indicator effect using gradients:

There are some minor flaws in this method. One of them is that when the scrolling distance is too short, there will be a significant beveling effect on the right side of the progress bar.

With @ scroll-timeline, we can finally bind the scrolling and animation elements together, and then implement the scrolling progress indicator, which is very easy:

... Text content.

# g-container {width: 100vw;} # g-container::before {content: "; position: fixed; height: 5px; left: 0; top: 0; right: 0; background: # ffc107; animation-name: scale; animation-duration: 1s; animation-fill-mode: forwards; animation-timeline: box-rotate; transform-origin: 0.50% } @ keyframes scale {0% {transform: scaleX (0);} 100% {transform: scaleX (1);} @ scroll-timeline box-rotate {source: auto; orientation: vertical;}

1. At the top of the page, we use a pseudo element to implement a high 5px progress bar that accounts for 100% of the screen. Normally, it goes like this:

2. You can get a scroll indicator by animating transform: scaleX (0) to transform: scaleX (1) and binding it to the scrolling of body. The effect is as follows:

Use scroll-offsets to precisely control the timing of animation trigger

You can take a look at the above Gif diagram, there is a problem, that is, the start time of the animation starts from the beginning of scrolling and ends at the end of scrolling. So what if I want the animation to trigger at a specific stage of scrolling?

Here, we need to use scroll-offsets to control our animation more accurately.

During scrolling, we can divide an element into three areas:

In the process of rolling, enter the field of view from the blind area of the upper field of vision.

In the process of scrolling, in the field of view

In the process of rolling, from the field of view, into the blind area of the lower field of vision.

Here, we can get two boundaries, the upper boundary and the lower boundary:

For the upper and lower boundaries, there will be two states. Taking the above boundary as an example, there will be:

The element is just beginning to enter the visual area

The element fully enters the visual area

For these two states, we use start 0 and start 1. Similarly, the lower boundary can also be represented by end 0 and end 1:

The zeros and ones here actually represent the percentage expected to be visible in the element scrolling.

With these state values, together with scroll-offsets, we can precisely control the trigger time of the scrolling animation.

Let's set up an animation from left to right with changes in transparency, and take a look at the following situations:

1. The scrolling animation begins when the element begins to appear from below, and ends when it appears completely.

Animation running range: end 0-- > end 1:

@ keyframes move {0% {transform: translate (- 100%, 0); opacity: 0;} 100% {transform: translate (0,0); opacity: 1;}} @ scroll-timeline box-move {source: auto; orientation: "vertical"; scroll-offsets: selector (# g-box) end 0, selector (# g-box) end 1 / * Legacy Descriptors Below: * / start: selector (# g-box) end 0; end: selector (# g-box) end 1; time-range: 1s;} # g-box {animation-name: move; animation-duration: 3s; animation-fill-mode: both; animation-timeline: box-move;}

2. The scrolling animation starts when the element appears completely from below, and ends after scrolling to the top and about to leave the screen:

Animation running range: end 1-- > start 1:

/ /... @ scroll-timeline box-move {source: auto; orientation: "vertical"; scroll-offsets: selector (# g-box) end 1, selector (# g-box) start 1; / * Legacy Descriptors Below: * / start: selector (# g-box) end 1; end: selector (# g-box) start 1; time-range: 1s;} / /.

3. The scrolling animation starts after the element scrolls to the top and leaves the screen, and ends after leaving the screen completely:

Animation running range: start 1-- > start 0:

/ /... @ scroll-timeline box-move {source: auto; orientation: "vertical"; scroll-offsets: selector (# g-box) start 1, selector (# g-box) start 0; / * Legacy Descriptors Below: * / start: selector (# g-box) start 1; end: selector (# g-box) start 0; time-range: 1s;}

Mastering the use of scroll-offsets is the key to the flexible use of scrolling timelines. Of course, you will also see start: selector (# g-box) start 1 and end: selector (# g-box) start 0 above, which is a legacy of the specification. The latest specification has used scroll-offsets instead of start: and end:.

Use @ scroll-timeline to achieve all kinds of effects

Once we have mastered the various syntax of @ scroll-timeline, we can start to use it to create various animation effects.

Laboratory characteristics and characteristic testing of @ scroll-timeline

Although @ scroll-timeline is good, it is still in the lab feature time. Chrome is supported from version 85, but it is turned off by default.

You can enable this feature through browser configuration in the latest chrome, Edge and Opera. You need to enable this feature in Chrome:

Enter chrome://flags in the browser URL box

Open # enable-experimental-web-platform-features

Although the wine is good, it is far from fully available, and the large-scale support of the browser will need to wait for a while. Give it some time!

Characteristic detection

Based on the current compatibility issues, we can gradually enhance the use of this feature by detecting the @ supports syntax of the browser.

The syntax for feature detection is also very simple:

@ supports (animation-timeline: works) {@ scroll-timeline list-item-1 {source: selector (# list-view); start: selector (# list-item-1) end 0; end: selector (# list-item-1) end 1; scroll-offsets: selector (# list-item-1) end 0, selector (# list-item-1) end 1; time-range: 1s } / /...}

You can determine whether the browser supports @ scroll-timeline by @ supports (animation-timeline: works) {}.

This is the end of the introduction to "how to use @ scroll-timeline, the new feature of CSS animation". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.