CSS -webkit-animation-name

The CSS -webkit-animation-name property allows you to specify a name for your animation. This name can then be used by the @-webkit-keyframes keyword/at-rule when setting the visual effects for your animation.

The CSS -webkit-animation-name 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-name 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: <name> [, ... ];
Example 

-webkit-animation-name:bounce /* Safari & Chrome */

-moz-animation-name:bounce /* Firefox */

-ms-animation-name:bounce /* Internet Explorer */

-o-animation-name:bounce /* Opera */

animation-name:bounce /* W3C */
Note that this example includes the CSS3 animation property as well as other CSS extensions. This is for browser compatibility.
Possible Values:
name
The name of the animation. The name is used to select the -webkit-keyframe keyword/at-rule that provides the keyframes and property values for the animation. If the name does not match any -webkit-keyframe at-rule, there are no properties to be animated and the animation is not executed.

Setting this property to none explicitly disables animations. So, if this property contains the value of none, no animation is executed even if there is a -webkit-keyframe at-rule with that name. The default value is "".
Initial Value: none
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