BlogsDope image BlogsDope

CSS animation-name

March 20, 2021 CSS ANIMATION 4243

The animation-name property specifies the name(s) of one or more animations defined by @keyframes rules to be applied to the specified element.

CSS

animation-name: value;

Animations in CSS allow you to change the state of an element. While the animation-name property is used to specify the names of animations, there are other animation properties as well like animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state.

See the Pen CSS animation-name by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

Note: For animations to be effective, it is necessary to define the animation-duration property because the duration of animations is zero by default.

Using @keyframes Rule to create animation

Animations are defined using the @keyframes rule. It defines the initial state, final state and intermediate states.

CSS

@keyframes color_change {
  from {background-color: red;}
  to {background-color: blue;}
}

In the above piece of code, an animation named "color_change" is defined. The initial and final states of the animation is defined by the from and to keywords respectively. Therefore, the animation changes the background color from red at the beginning to blue at the end.

Look at another piece of code.

CSS

@keyframes state_change {
  0% {background-color: red; width: 200px;}
  50% {background-color: green;}
  100% {background-color: blue; width: 300px;}
}

An animation named "state_change" is defined which changes the background color from red at the beginning to green when the animation is 50% complete to red at the end. It also changes the width from 200px at the beginning to 300px when the animation is 100% complete.

Values

none : No animation will be there. This is the default value.

animation_name : Specifies a single or multiple comma-separated names of animations defined by @keyframes rules.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Examples

In the following example, an animation named "slide" is defined using @keyframes which changes the left margin from 0 to 70px during the animation. On giving "slide" to the animation-name property applied to a div, the left margin of the div changes from 0 to 70px.

The time which the animation takes is specified by the animation-duration property. The prefix -webkit- is used for better browser support.

HTML

<div></div>

CSS

@keyframes slide {
  from {margin-left: 0px;}
  to {margin-left: 70px;}
}

div {
  width: 100px;
  height: 100px;
  background-color: #cc9900;
  -webkit-animation-name: slide;
  animation-name: slide;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

See the Pen CSS animation-name by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

In the next example, an animation named "move" is created which defines the top and left positions when the animation is 0%, 20%, 50%, 70% and 100% complete. The duration of this animation applied to a div is set to 4 seconds.

HTML

<div></div>

CSS

@keyframes move {
  0% {top: 110px; left: 0;}
  20% {top: 0; left: 0;}
  50% {top: 0; left: 200px;}
  70% {top: 110px; left: 200px;}
  100% {top: 110px; left: 0;}
}

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #007399;
  position: relative;
  top: 110px;
  -webkit-animation-name: move;
  animation-name:  move;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}

See the Pen CSS animation-name by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

Look at another example.

See the Pen CSS animation-name by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

Giving multiple animations

To give more than one animation to an element, give the comma-separated names of those animations as values to the animation-name property. These animations take place simultaneously.

In the following demo, two animations named "compress" and "colorChange" are defined and applied to a span element. The duration of both the animations is 1 second.

HTML

<span>CodesDope</span>

CSS

@keyframes compress{
  0% {letter-spacing: 20px;}
  60% {letter-spacing: -2px;}
  100% {letter-spacing: 1px;}
}

@keyframes colorChange{
  0% {color: white;}
  100% {color: blue;}
}

span {
  font-size: 30px;
  font-weight: 800;
  color: blue;
  -webkit-animation-name: compress, colorChange;
  animation-name: compress, colorChange;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

See the Pen CSS animation-name by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

Browser Support

This property is supported in all the major browsers.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).