CODEWITHSUNDEEP
htmlcsscss-animationsmultiple-inheritanceclass-attributes
Nelson Ndiy
Nelson Ndiy

Reputation: 23

How can i combine multiple class names to one keyframe in css

i'm trying to make some animation for two different classes without repeating the @keyframes properties. such that the classes will be styled differently while the keyframes animation properties remains the same. i.e for classes class_1 and class_2 associated to two different elements. i'm trying to have @keyframes(clas_1 clas_2) without repeating the entire keyframes properties for clas_1 and clas_2 separately.

i tried separating the two classes with a space after the keyframes as well as using a comma and both cases didn't produce the animation for both elements but will produce when i place a single class after the keyframe. hoping to get a means to include both classes without repeating the keyframes properties.

/* properties of all the elements */

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-duration: 4;
  animation-iteration-count: infinite;
  /*animation run time*/
}


/* the third and fourth element */

.anim_3,
.anim_4 {
  position: relative;
}


/* for the third element */

.anim_3 {
  animation-name: anim_3;
  animation-delay: 1s;
}


/* for the fourth element */

.anim_4 {
  animation-name: anim_4;
  animation-delay: 2s;
  animation-direction: reverse;
}


/* Animation code of the third and fourth element */

@keyframes anim_3,
anim_4 {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background-color: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background-color: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background-color: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
}
<h1>CSS Animation</h1>
<p>
  <b>Note</b> Both the background-color and the position of the element changes
</p>
<div class="anim_3">Third Animation</div>
<p>
  <b>Note:</b> the animation runs in the reverse direction
</p>
<div class="anim_4">Fourth Animation</div>

Upvotes: 2

Views: 495

Answers (1)

Gerard
Gerard

Reputation: 15786

What you did was trying to give the animation 2 different names. That's not allowed. I changed the name to anim and added a duration of 1 second to the classes.

/* properties of all the elements */

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-duration: 4;
  animation-iteration-count: infinite;
  /*animation run time*/
}


/* the third and fourth element */

.anim_3,
.anim_4 {
  position: relative;
}


/* for the third element */

.anim_3 {
  animation-name: anim;
  animation-delay: 1s;
  animation-duration: 1s;
}


/* for the fourth element */

.anim_4 {
  animation-name: anim;
  animation-delay: 2s;
  animation-direction: reverse;
  animation-duration: 1s;
}


/* Animation code of the third and fourth element */

@keyframes anim {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background-color: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background-color: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background-color: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
}
<h1>CSS Animation</h1>
<p>
  <b>Note</b> Both the background-color and the position of the element changes
</p>
<div class="anim_3">Third Animation</div>
<p>
  <b>Note:</b> the animation runs in the reverse direction
</p>
<div class="anim_4">Fourth Animation</div>

Upvotes: 1

Related Questions