animation-name
Quick Summary for animation-name
The animation-name CSS property specifies the names of one or more @keyframes at-rules describing the animation or animations to apply to the element.
Code Usage for animation-name
/* Single animation */ animation-name: none; animation-name: test_05; animation-name: -specific; animation-name: sliding-vertically;  /* Multiple animations */ animation-name: test1, animation4; animation-name: none, -moz-specific, sliding;  /* Global values */ animation-name: initial; animation-name: inherit; animation-name: revert; animation-name: unset; 
More Details for animation-name

animation-name

The animation-name CSS property specifies the names of one or more @keyframes at-rules describing the animation or animations to apply to the element.

It is often convenient to use the shorthand property animation to set all animation properties at once.

Syntax

/* Single animation */ animation-name: none; animation-name: test_05; animation-name: -specific; animation-name: sliding-vertically;  /* Multiple animations */ animation-name: test1, animation4; animation-name: none, -moz-specific, sliding;  /* Global values */ animation-name: initial; animation-name: inherit; animation-name: revert; animation-name: unset; 

Values

none

A special keyword denoting no keyframes. It can be used to deactivate an animation without changing the ordering of the other identifiers, or to deactivate animations coming from the cascade.

<custom-ident>

A name identifying the animation. This identifier is composed of a combination of case-sensitive letters a to z, numbers 0 to 9, underscores (_), and/or dashes (-). The first non-dash character must be a letter. Also, two dashes are forbidden at the beginning of the identifier. Furthermore, the identifier can't be none, unset, initial, or inherit.

Note: When you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. For more information, see Setting multiple animation property values.

Formal definition

Initial valuenone
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

[ none | <keyframes-name> ]#

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

Examples

The animation has an animation-name of rotate

HTML
<div class="box"></div> 
CSS
.box {   background-color: rebeccapurple;   border-radius: 10px;   width: 100px;   height: 100px;   animation-name: rotate;   animation-duration: 0.7s; }  @keyframes rotate {   0% {     transform: rotate(0);   }   100% {     transform: rotate(360deg);   } } 
Result

See CSS animations for examples.

Specifications

Specification
CSS Animations Level 2 # animation-name

See also

Using CSS animations JavaScript AnimationEvent API Select your preferred language English (US)DeutschEspañolFrançais日本語Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
I'm a big believer in energy and the secret and that sort of thing.
Unknown
Random CSS Property

background

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.
background css reference