Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/en-US/docs/Web/CSS/CSS_scroll-driven_animations below:

CSS scroll-driven animations - CSS

The CSS scroll-driven animations module provides functionality that builds on top of the CSS animations module and Web Animations API. It allows you to animate property values based on a progression along a scroll-based timeline instead of the default time-based document timeline. This means that you can animate an element by scrolling a scrollable element, rather than just by the passing of time.

There are two types of scroll-based timelines:

• scroll progress timeline: You progress this timeline by scrolling a scrollable element (scroller) from top to bottom (or left to right) and back again. The position in the scroll range is converted into a percentage of progress — 0% at the start and 100% at the end.
• view progress timeline: You progress this timeline based on the change in visibility of an element (known as the subject) inside a scroller. The visibility of the subject inside the scroller is tracked as a percentage of progress — by default, the timeline is at 0% when the subject is first visible at one edge of the scroller, and 100% when it reaches the opposite edge.

When one of these two timelines is applied to an animated element, the animation progresses along that timeline instead of following the default time-based timeline.

It is possible to adjust the effective placement of the animation along the scroll progress and view progress timelines, i.e., you can define the position at which the animation starts and ends. This can be done in a couple of different ways:

• Start and end animation range values can be applied to the animation to adjust the position of the animation's starting and ending position along the timeline.
• View progress timelines can have a start and/or end inset (or outset) applied to them to adjust the position of the scrollport (see Scroll container for more details) in which the subject element is deemed to be visible. Put another way, this allows you to specify start and/or end inset (or outset) values that offset the position of the timeline itself.

You can find several tools and demos showing scroll-driven animations in action at Scroll-driven Animations tools and demos.

Set the timeline that will control the progress of an animation, and set its attachment range along that timeline:

• animation-timeline
• animation-range
• animation-range-start
• animation-range-end

Define named scroll progress timelines:

• scroll-timeline
• scroll-timeline-axis
• scroll-timeline-name

Define named view progress timelines:

• view-timeline
• view-timeline-axis
• view-timeline-inset
• view-timeline-name

Modify timeline scope:

• timeline-scope

CSS scroll-driven animations adds the ability to include <timeline-range-name>s in @keyframes blocks, to place keyframes at specific positions inside named timeline ranges.

Possible values of the animation-timeline property for defining anonymous scroll progress timelines and anonymous view progress timelines (i.e., implicitly defined by the browser rather than being explicitly named and defined using the scroll-timeline-* and view-timeline-* properties):

• scroll()
• view()

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4