Menu Samaritan's Purse

ANIMATION

The animation property 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.

s

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>

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.

<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

ANIMATION-DELAY

ANIMATION-DIRECTION

ANIMATION-DURATION

ANIMATION-FILL-MODE

ANIMATION-ITERATION-COUNT

ANIMATION-NAME

ANIMATION-PLAY-STATE

ANIMATION-TIMING-FUNCTION

JS

INTERNAL

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-name

animation-play-state

animation-timing-function

EXTERNAL

World Wide Web Consortium (W3C)