CSS -webkit-animation

The CSS -webkit-animation property is a shorthand property for setting WebKit multiple animation properties in one place. To create an animation using WebKit, use the -webkit-animation in conjunction with the @-webkit-keyframes keyword/at-rule, which allows you to define visual effects for your animation.

The CSS -webkit-animation property is a proprietary CSS extension that is supported by the WebKit browser engine. WebKit extensions contain the -webkit- prefix, which indicates that it belongs to the WebKit open source framework.

Although the -webkit-animation property is not part of the official W3C CSS specification, it is designed to work on browsers that are powered by the WebKit browser engine, such as Apple Safari and Google Chrome.

Browser Compatability

This property is a proprietary extension that is only supported in Chrome and Safari browsers. For maximum browser compatibility, you should add the W3C CSS3 equivalent to your code. This is typically done by removing the -webkit- prefix, however, you should always check the correct syntax before implementing your code (at the time of writing, CSS3 was still a work in progress).

Also consider adding other proprietary extensions such as -ms- for Internet Explorer, -moz- for Firefox, -o- for Opera etc. However, you should check that a corresponding extension exists before doing this, as not all browsers have corresponding extensions, and those that do may not necessarily accept the same parameters.

Syntax: -webkit-animation: <name> <duration> <timing_function> <delay> <iteration_count> <direction> [, ... ];
Example 
-webkit-animation:bounce 1s ease-in 2s 6 alternate; /* Safari & Chrome */
-moz-animation:bounce 1s ease-in 2s 6 alternate; /* Firefox */
-ms-animation:bounce 1s ease-in 2s 6 alternate; /* Internet Explorer */
-o-animation:bounce 1s ease-in 2s 6 alternate; /* Opera */
animation:bounce 1s ease-in 2s 6 alternate; /* W3C */
Note that this example includes the CSS3 animation property as well as other CSS extensions. This is for browser compatibility.
Try it yourself!

Demo

Editor Preview
Possible Values:
name
The name of the animation. For more information, see -webkit-animation-name.
duration
Defines the length of time that an animation takes to complete one iteration.
timing_function
Specifies how an animation progresses between keyframes.
delay
Defines when an animation starts.
iteration_count
Specifies the number of times an animation iterates.
direction
Determines whether the animation should play in reverse on alternate iterations.
Initial Value: See individual properties
Applies to: All elements, and the :before and :after pseudo elements
Inherited: No
Media: Visual

Browser Compatability

This property is a proprietary extension that is only supported in Chrome and Safari browsers. For maximum browser compatibility, you should add the W3C CSS3 equivalent to your code. This is typically done by removing the -webkit- prefix, however, you should always check the correct syntax before implementing your code (at the time of writing, CSS3 was still a work in progress).

Also consider adding other proprietary extensions such as -ms- for Internet Explorer, -moz- for Firefox, -o- for Opera etc. However, you should check that a corresponding extension exists before doing this, as not all browsers have corresponding extensions, and those that do may not necessarily accept the same parameters.

Related