animation-timeline

Description
Syntax
Examples
Links

Description

The animation-timeline property for CSS specifies the timeline used with the animation.

Syntax

CSS

animation-timeline: value;

JS

object.style.animationTimeline = "value";

Values

<'animation-timeline'> = <single-animation-timeline>#

<single-animation-timeline> = auto | none | <custom-ident> | <scroll()> | <view()>

auto

Automatically specified by the user agent.

none

The animation is not associated with a timeline.

<custom-ident>

Specifies any valid identifier that is not misinterpreted as a keyword.

<scroll()> = scroll( [ <scroller> || <axis> ]? )

<scroller> = root | nearest | self

root

Specifies to use the document viewport as the scroll container.

nearest

Specifies to use the nearest ancestor scroll container.

self

Specifies to use the element’s own principal box as the scroll container. If the principal box is not a scroll container, then the scroll progress timeline is inactive.

<axis> = block | inline | vertical | horizontal

block

Specifies to use the measure of progress along the block axis of the scroll container.

inline

Specifies to use the measure of progress along the inline axis of the scroll container.

vertical

Specifies to use the measure of progress along the vertical axis of the scroll container.

horizontal

Specifies to use the measure of progress along the horizontal axis of the scroll container.

<view()> = view( [ <axis> || <'view-timeline-inset'> ]? )

<axis> = block | inline | vertical | horizontal

block

Specifies to use the measure of progress along the block axis of the scroll container.

inline

Specifies to use the measure of progress along the inline axis of the scroll container.

vertical

Specifies to use the measure of progress along the vertical axis of the scroll container.

horizontal

Specifies to use the measure of progress along the horizontal axis of the scroll container.

<'view-timeline-inset'> = [ [ auto | <length-percentage> ]{1,2} ]#

auto

Automatically specified by the user agent.

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

Initial

auto

<!doctype html>
<html>
<head>
    <style>
        @keyframes mykeyframes
        {
            0%
            {
                background-color: red;
            }
            100%
            {
                background-color: blue;
            }
        }
        .myclass
        {
            height: 50vh;
            overflow: scroll;
            scroll-timeline-name: mytimeline;
            width: 50vw;
        }
        .myclass > div
        {
            animation-duration: 1s;
            animation-name: mykeyframes;
            height: 100vh;
            width: 100vw;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>auto</button>
    <button>none</button>
    <button value="mytimeline">custom-ident</button><br>
    <button>scroll(root)</button>
    <button>scroll(nearest)</button>
    <button>scroll(self)</button><br>
    <button>scroll(block)</button>
    <button>scroll(inline)</button>
    <button>scroll(vertical)</button>
    <button>scroll(horizontal)</button><br>
    <button>view(block)</button>
    <button>view(inline)</button>
    <button>view(vertical)</button>
    <button>view(horizontal)</button><br>
    <button>view(auto)</button>
    <button value="view(100px)">view(length-percentage)</button>
    <div class="myclass">
        <div>animation-timeline</div>
    </div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector(".myclass > div").style.animationTimeline = myproperty;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>