animation

Description
Syntax
Examples
Links

Description

The animation property for CSS is shorthand for animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, and animation-timing-function.

Syntax

CSS

animation: value;

JS

object.style.animation = "value";

Values

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

<single-animation> = <time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

<time>

Defines how long of a delay there is between the start of the animation and when it begins executing.

ms

Milliseconds. There are 1000 milliseconds in 1 second.

Seconds.

<easing-function> = linear | <cubic-bezier-easing-function> | <step-easing-function>

linear

Its output progress value is equal to the input progress value for all inputs.

<cubic-bezier-easing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)

ease

Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).

ease-in

Equivalent to cubic-bezier(0.42, 0, 1, 1).

ease-out

Equivalent to cubic-bezier(0, 0, 0.58, 1).

ease-in-out

Equivalent to cubic-bezier(0.42, 0, 0.58, 1).

cubic-bezier()

Specifies a cubic Bezier easing function. The four numbers specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid.

<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<step-easing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)

step-start

Computes to steps(1, start)

step-end

Computes to steps(1, end)

steps()

The first parameter specifies the number of intervals in the function. It must be a positive integer greater than 0 unless the second parameter is jump-none in which case it must be a positive integer greater than 1. The second parameter, which is optional, specifies the step position.

<integer>

Specifies one or more decimal digits (0-9).

<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

jump-start

The first rise occurs at input progress value of 0.

jump-end

The last rise occurs at input progress value of 1.

jump-none

All rises occur within the range (0, 1).

jump-both

The first rise occurs at input progress value of 0 and the last rise occurs at input progress value of 1.

start

Behaves as jump-start.

end

Behaves as jump-end.

<single-animation-iteration-count> = infinite | <number>

infinite

The animation will repeat forever.

<number>

<single-animation-direction> = normal | reverse | alternate | alternate-reverse

normal

All iterations of the animation are played as specified. Intial.

reverse

All iterations of the animation are played in the reverse direction from the way they were specified.

alternate

The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.

alternate-reverse

The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction.

<single-animation-fill-mode> = none | forwards | backwards | both

none

The animation has no effect when it is applied but not executing.

forwards

After the animation ends, the animation will apply the property values for the time the animation ended.

backwards

During the period defined by animation-delay, the animation will apply the property values defined in the keyframe that will start the first iteration of the animation.

both

The effects of both forwards and backwards fill apply.

<single-animation-play-state> = running | paused

running

The animation proceeds as normal.

paused

The animation is paused. It restarts from where it left off.

none

<keyframes-name> = <custom-ident> | <string>

<custom-ident>

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

<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

Examples

1 · animation-delay

2 · animation-direction

3 · animation-duration

4 · animation-fill-mode

5 · animation-iteration-count

6 · animation-name

7 · animation-play-state

8 · animation-timing-function

9 · JS

<!doctype html>
<html>
<head>
    <style>
        @keyframes mykeyframes
        {
            0%
            {
                margin-left: 0;
            }
            100%
            {
                margin-left: 200px;
            }
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="2s normal 4s none infinite mykeyframes running ease">animation-delay</button>
    <button value="1s reverse 4s none infinite mykeyframes running ease">animation-direction</button>
    <button value="1s normal 2s none infinite mykeyframes running ease">animation-duration</button>
    <button value="1s normal 4s forwards 2 mykeyframes running ease">animation-fill-mode</button>
    <button value="1s normal 4s none 2 mykeyframes running ease">animation-iteration-count</button>
    <button value="1s normal 4s none infinite none running ease">animation-name</button>
    <button value="1s normal 4s none infinite mykeyframes paused ease">animation-play-state</button>
    <button value="1s normal 4s none infinite mykeyframes running linear">animation-timing-function</button>
    <p>animation</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector("p").style.animation = myproperty;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>