CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES

CSS3 animation Property

Topic: CSS3 Properties ReferencePrev|Next

Description

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

The following table summarizes the usages context and the version history of this property.

Default value:
none 0 ease 0 1 normal none running; See individual properties
Applies to: All elements, ::before and ::after pseudo-elements
Inherited: No
Animatable: No. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

animation [ name duration timing-function delay iteration-count direction fill-mode play-state ] | initial | inherit

The example below shows the animation property in action.

.box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation: moveit 2s linear 0s infinite alternate;
    /* Standard syntax */
    animation: moveit 2s linear 0s infinite alternate;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

Note: You must specify at least two properties animation-name and the animation-duration (greater than 0), to make the animation occur.


Property Values

The following table describes the values of this property.

Value Description
animation-name Specifies the name of @keyframes defined animations that should be applied to the selected element.
animation-duration Specifies how many seconds or milliseconds that an animation takes to complete one cycle of the animation.
animation-timing-function Specifies how the animation will progress over the duration of each cycle i.e. the easing functions.
animation-delay Specifies a delay before the animation will start.
animation-iteration-count Specifies the number of times an animation cycle should be played before stopping.
animation-direction Specifies whether or not the animation should play in reverse on alternate cycles.
animation-fill-mode Specifies how a CSS animation should apply styles to its target before and after it is executing.
animation-play-state Specifies whether the animation is running or paused.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation property.

Browser Compatibility

The animation property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 5+ -moz-, 15+
  • Google Chrome 4+ -webkit-
  • Internet Explorer 10+
  • Apple Safari 4+ -webkit-
  • Opera 12+ -o-, 15+ -webkit-

Further Reading

See tutorial on: CSS3 Animations.

Related properties and at-rules: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, @keyframes.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties