Is there a way that I can make the second animation not get overwritten?

user_11166648 0
Viewed 30

So I've tried separating the animations with a comma and having them on the same transform but it still doesn't work.

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  background: silver;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 20%;
  height: 20%;
  background-color: pink;
  transform: rotate(0deg) translatey(0px);
  animation: wavy 3s linear infinite alternate,
  float 3s linear infinite alternate;
}

@keyframes wavy {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
} 
<div class="container">
  <div class="box"></div>
</div>

And here's a link to the codepen:

https://codepen.io/FaroukHamadi/pen/OJOWWKW

keyframe css-animations animation css
1 Answers

Yes - add an id to the div and set that animation on the specified id. For your example, I called it #box

EDIT ~ the id solution I had previously worked flawlessly UNLESS there are two transforms being used in the keyframe which is your case. What I would suggest is just combining the two animations into one animation and using more % increments. So instead of 0, 50, and 100, you can use 0, 25, 50, 75, 100 - to combine the two and have it seem like they are "alternating"

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  background: silver;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 20%;
  height: 20%;
  background-color: pink;
  transform: rotate(0deg) translatey(0px);
  animation: wavy-float 3s linear infinite alternate;
}


@keyframes wavy-float {
  0% {
    transform: rotate(0deg):
  }
  25% {
    transform: rotate(-20deg);
  }
  50% {
    transform: translateY(-20px);
  }
  75% {
    transform: rotate(20deg);
  }
  100% {
    transform: translateY(20px)
  }
}
<div class="container">
  <div class="box"></div>
</div>

user_164963570
Related