Is there a way to fix the animation from overriding the initial translate

user_17042385 0
Viewed 53

The initial positioning seems to be altered when the animation property is included. when the transform origin property is removed or added it will yield the same effect. The initial transforms are getting overridden by the animation.

div {
  border-radius: 45px;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section[id ^='sec'] {
  border-radius: 45px;
}

.container {
  position: relative;
  width: 10em;
  height: 10em;
  background: red;
}

#sec1 {
  right: 0;
  position: absolute;
  height: 40%;
  width: 40%;
  background: yellow;
  transform: translateX(100px) translateY(-80px)
}

#sec2 {
  height: 40%;
  width: 40%;
  background: aqua;
  transform: translateX(-100px) translateY(-80px)
}

#sec3 {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40%;
  width: 40%;
  background: green;
  transform: translateX(-100px) translateY(80px)
}

#sec4 {
  position: absolute;
  height: 40%;
  width: 40%;
  right: 0;
  bottom: 0;
  background: purple;
  transform: translateX(100px) translateY(80px)
}

#sec5 {
  position: absolute;
  bottom: 50;
  left: 0;
  height: 40%;
  width: 40%;
  background: navajowhite;
  transform: translateX(-100px) translateY(-10px)
}

#sec6 {
  position: absolute;
  bottom: 50;
  right: 0;
  height: 40%;
  width: 40%;
  background: teal;
  transform: translateX(100px) translateY(-10px)
}

#sec7 {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 40%;
  width: 40%;
  background: pink;
  transform: translateX(-50px) translateY(100px);
}

#sec8 {
  position: absolute;
  top: 0;
  left: 0;
  height: 40%;
  width: 40%;
  background: cadetblue;
  transform: translateX(50px) translateY(-100px);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform-origin: initial;
    transform: translateY(-100px);
  }
  50% {
    transform-origin: initial;
    transform: translateY(-120px);
  }
  100% {
    transform-origin: initial;
    transform: translateY(-100px);
  }
}
<div class="container">
  <section id="sec1"></section>
  <section id="sec2"></section>
  <section id="sec3"></section>
  <section id="sec4"></section>
  <section id="sec5"></section>
  <section id="sec6"></section>
  <section id="sec7"></section>
  <section id="sec8"></section>
</div>

css html
1 Answers

If you're using absolute positioning anyway, why not just apply the translates to the absolute values and then animate them as opposed to translating your already translated items? You're kind of working against yourself. (made the animation faster to make it more obvious, you can set it to your initial value)

div {
  border-radius: 45px;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section[id ^='sec'] {
  border-radius: 45px;
}

.container {
  position: relative;
  width: 10em;
  height: 10em;
  background: red;
}

#sec1 {
  right: -100px;
  top: -80px;
  position: absolute;
  height: 40%;
  width: 40%;
  background: yellow;
}

#sec2 {
  position: absolute;
  top: -80px;
  left: -100px;
  height: 40%;
  width: 40%;
  background: aqua;
}

#sec3 {
  position: absolute;
  bottom: -80px;
  left: -95px;
  height: 40%;
  width: 40%;
  background: green;
}

#sec4 {
  position: absolute;
  height: 40%;
  width: 40%;
  right: -100px;
  bottom: -80px;
  background: purple;
}

#sec5 {
  position: absolute;
  top: 50px;
  left: -100px;
  height: 40%;
  width: 40%;
  background: navajowhite;
}

#sec6 {
  position: absolute;
  top: 50px;
  right: -100px;
  height: 40%;
  width: 40%;
  background: teal;
}

#sec7 {
  position: absolute;
  bottom: -100px;
  right: 50px;
  height: 40%;
  width: 40%;
  background: pink;
}

#sec8 {
  position: absolute;
  top: -100px;
  left: 45px;
  height: 40%;
  width: 40%;
  background: cadetblue;
  animation: float 1s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(-10px);
  }
}
<div class="container">
  <section id="sec1"></section>
  <section id="sec2"></section>
  <section id="sec3"></section>
  <section id="sec4"></section>
  <section id="sec5"></section>
  <section id="sec6"></section>
  <section id="sec7"></section>
  <section id="sec8"></section>
</div>

user_85650100
Related