animation-name
Defines a comma-separated list of animations to apply to the given selector.
Syntax
animation-name: <value>;
where <value>
is a @keyframes
rule, which contains the properties that will be animated.
div {animation-name: fade;}@keyframes fade {/* properties: values; */}
Example 1
Give the animation-name
a value of disappear
:
div {height: 200px;width: 200px;background-color: blue;animation-duration: 2s;animation-name: disappear;}@keyframes disappear {from {background-color: blue;}to {background-color: white;}}
Example 2
Give the animation-name
a second comma-separated value slideleft
:
div {height: 200px;width: 200px;background-color: blue;animation-duration: 4s, 5000ms;animation-name: fadeoutfadein, slideleft;}@keyframes fadeoutfadein {0% {background-color: blue;}50% {background-color: white;}100% {background-color: blue;}}@keyframes slideleft {from {margin-left: 100%;}to {margin-left: 0%;}}