need guidance in css animation behaviour for multiple transform

Question

I did css animation with multiple transform on one element. It behaves differently what i am expecting. So i need guidance in correcting my code to achieve the result. I will add my code below.

.container1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.stem1 {
  width: 6px;
  height: 50px;
  margin: 0 auto;
  background: #154360;
  animation: stem1-motion 5s linear forwards;
  animation-iteration-count: infinite;
}

.container2 {
  width: 100px;
  height: 150px;
  border: 1px solid black;
}

.stem2 {
  width: 6px;
  height: 50px;
  margin: 0 auto;
  background: #154360;
  animation: stem2-motion 5s linear forwards;
  animation-iteration-count: infinite;
}

.container3 {
  width: 100px;
  height: 150px;
  border: 1px solid black;
}

.stem3 {
  width: 6px;
  height: 50px;
  margin: 0 auto;
  background: #154360;
  animation: stem3-motion 5s linear forwards;
  animation-iteration-count: infinite;
}

@keyframes stem1-motion {
  0% {
    transform: rotate(0.0deg);
    transform-origin: top center;
  }
  8% {
    transform: rotate(-9.98deg);
    transform-origin: top center;
  }
  16% {
    transform: rotate(-17.69deg);
    transform-origin: top center;
  }
  25% {
    transform: rotate(-21.10deg);
    transform-origin: top center;
  }
  33% {
    transform: rotate(-18.38deg);
    transform-origin: top center;
  }
  41% {
    transform: rotate(-11.12deg);
    transform-origin: top center;
  }
  50% {
    transform: rotate(-2.52deg);
    transform-origin: top center;
  }
  58% {
    transform: rotate(9.98deg);
    transform-origin: top center;
  }
  66% {
    transform: rotate(17.69deg);
    transform-origin: top center;
  }
  75% {
    transform: rotate(21.10deg);
    transform-origin: top center;
  }
  83% {
    transform: rotate(18.38deg);
    transform-origin: top center;
  }
  91% {
    transform: rotate(11.12deg);
    transform-origin: top center;
  }
  100% {
    transform: rotate(5.05deg);
    transform-origin: top center;
  }
}

@keyframes stem2-motion {
  0% {
    transform: translateY(0.0px);
    transform-origin: top center;
  }
  8% {
    transform: translateY(5.566199398026136px);
    transform-origin: top center;
  }
  16% {
    transform: translateY(20.887794225945157px);
    transform-origin: top center;
  }
  25% {
    transform: translateY(45.0px);
    transform-origin: top center;
  }
  33% {
    transform: translateY(66.67891533457717px);
    transform-origin: top center;
  }
  41% {
    transform: translateY(82.99475664759068px);
    transform-origin: top center;
  }
  50% {
    transform: translateY(90.0px);
    transform-origin: top center;
  }
  58% {
    transform: translateY(84.43380060197387px);
    transform-origin: top center;
  }
  66% {
    transform: translateY(69.11220577405487px);
    transform-origin: top center;
  }
  75% {
    transform: translateY(45.00000000000001px);
    transform-origin: top center;
  }
  83% {
    transform: translateY(23.32108466542279px);
    transform-origin: top center;
  }
  91% {
    transform: translateY(7.005243352409316px);
    transform-origin: top center;
  }
  100% {
    transform: translateY(0.0px);
    transform-origin: top center;
  }
}

@keyframes stem3-motion {
  0% {
    transform: rotate(0.0deg) translateY(0.0px);
    transform-origin: top center;
  }
  8% {
    transform: rotate(-9.987383695374957deg) translateY(5.566199398026136px);
    transform-origin: top center;
  }
  16% {
    transform: rotate(-17.69548887689718deg) translateY(20.887794225945157px);
    transform-origin: top center;
  }
  25% {
    transform: rotate(-21.10019602409302deg) translateY(45.0px);
    transform-origin: top center;
  }
  33% {
    transform: rotate(-18.38921403145706deg) translateY(66.67891533457717px);
    transform-origin: top center;
  }
  41% {
    transform: rotate(-11.1219360330404deg) translateY(82.99475664759068px);
    transform-origin: top center;
  }
  50% {
    transform: rotate(-2.5260153474725556e-15deg) translateY(90.0px);
    transform-origin: top center;
  }
  58% {
    transform: rotate(9.987383695374957deg) translateY(84.43380060197387px);
    transform-origin: top center;
  }
  66% {
    transform: rotate(17.695488876897173deg) translateY(69.11220577405487px);
    transform-origin: top center;
  }
  75% {
    transform: rotate(21.10019602409302deg) translateY(45.00000000000001px);
    transform-origin: top center;
  }
  83% {
    transform: rotate(18.38921403145705deg) translateY(23.32108466542279px);
    transform-origin: top center;
  }
  91% {
    transform: rotate(11.121936033040393deg) translateY(7.005243352409316px);
    transform-origin: top center;
  }
  100% {
    transform: rotate(5.052030694945111e-15deg) translateY(0.0px);
    transform-origin: top center;
  }
}

<div class="container1">
  <div class="stem1">

  </div>
</div>
<div class="container2">
  <div class="stem2">

  </div>
</div>
<div class="container3">
  <div class="stem3">

  </div>
</div>

I combined both linear and rotate movements in transform. I am expecting top end movement should be linear that is it should flow only in y direction. Your suggestions will help me proceed further.

Spencer · Accepted Answer · 2022-12-30 03:59:34Z

If I am understanding your goal correctly, I think this is what you want. You just have to switch around the translation and the rotation so the translation happens first. The reason is because if you rotate and then translate, you are translating in the direction of the rotation.

.container1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.stem1 {
  width: 6px;
  height: 50px;
  margin: 0 auto;
  background: #154360;
  animation: stem1-motion 5s linear forwards;
  animation-iteration-count: infinite;
}

.container2 {
  width: 100px;
  height: 150px;
  border: 1px solid black;
}

.stem2 {
  width: 6px;
  height: 50px;
  margin: 0 auto;
  background: #154360;
  animation: stem2-motion 5s linear forwards;
  animation-iteration-count: infinite;
}

.container3 {
  width: 100px;
  height: 150px;
  border: 1px solid black;
}

.stem3 {
  width: 6px;
  height: 50px;
  margin: 0 auto;
  background: #154360;
  animation: stem3-motion 5s linear forwards;
  animation-iteration-count: infinite;
}

@keyframes stem1-motion {
  0% {
    transform: rotate(0.0deg);
    transform-origin: top center;
  }
  8% {
    transform: rotate(-9.98deg);
    transform-origin: top center;
  }
  16% {
    transform: rotate(-17.69deg);
    transform-origin: top center;
  }
  25% {
    transform: rotate(-21.10deg);
    transform-origin: top center;
  }
  33% {
    transform: rotate(-18.38deg);
    transform-origin: top center;
  }
  41% {
    transform: rotate(-11.12deg);
    transform-origin: top center;
  }
  50% {
    transform: rotate(-2.52deg);
    transform-origin: top center;
  }
  58% {
    transform: rotate(9.98deg);
    transform-origin: top center;
  }
  66% {
    transform: rotate(17.69deg);
    transform-origin: top center;
  }
  75% {
    transform: rotate(21.10deg);
    transform-origin: top center;
  }
  83% {
    transform: rotate(18.38deg);
    transform-origin: top center;
  }
  91% {
    transform: rotate(11.12deg);
    transform-origin: top center;
  }
  100% {
    transform: rotate(5.05deg);
    transform-origin: top center;
  }
}

@keyframes stem2-motion {
  0% {
    transform: translateY(0.0px);
    transform-origin: top center;
  }
  8% {
    transform: translateY(5.566199398026136px);
    transform-origin: top center;
  }
  16% {
    transform: translateY(20.887794225945157px);
    transform-origin: top center;
  }
  25% {
    transform: translateY(45.0px);
    transform-origin: top center;
  }
  33% {
    transform: translateY(66.67891533457717px);
    transform-origin: top center;
  }
  41% {
    transform: translateY(82.99475664759068px);
    transform-origin: top center;
  }
  50% {
    transform: translateY(90.0px);
    transform-origin: top center;
  }
  58% {
    transform: translateY(84.43380060197387px);
    transform-origin: top center;
  }
  66% {
    transform: translateY(69.11220577405487px);
    transform-origin: top center;
  }
  75% {
    transform: translateY(45.00000000000001px);
    transform-origin: top center;
  }
  83% {
    transform: translateY(23.32108466542279px);
    transform-origin: top center;
  }
  91% {
    transform: translateY(7.005243352409316px);
    transform-origin: top center;
  }
  100% {
    transform: translateY(0.0px);
    transform-origin: top center;
  }
}

@keyframes stem3-motion {
  0% {
    transform: translateY(0.0px) rotate(0.0deg);
    transform-origin: top center;
  }
  8% {
    transform: translateY(5.566199398026136px) rotate(-9.987383695374957deg);
    transform-origin: top center;
  }
  16% {
    transform: translateY(20.887794225945157px) rotate(-17.69548887689718deg);
    transform-origin: top center;
  }
  25% {
    transform: translateY(45.0px) rotate(-21.10019602409302deg);
    transform-origin: top center;
  }
  33% {
    transform: translateY(66.67891533457717px) rotate(-18.38921403145706deg);
    transform-origin: top center;
  }
  41% {
    transform: translateY(82.99475664759068px) rotate(-11.1219360330404deg);
    transform-origin: top center;
  }
  50% {
    transform: translateY(90.0px) rotate(-2.5260153474725556e-15deg);
    transform-origin: top center;
  }
  58% {
    transform: translateY(84.43380060197387px) rotate(9.987383695374957deg);
    transform-origin: top center;
  }
  66% {
    transform: translateY(69.11220577405487px) rotate(17.695488876897173deg);
    transform-origin: top center;
  }
  75% {
    transform: translateY(45.00000000000001px) rotate(21.10019602409302deg);
    transform-origin: top center;
  }
  83% {
    transform: translateY(23.32108466542279px) rotate(18.38921403145705deg);
    transform-origin: top center;
  }
  91% {
    transform: translateY(7.005243352409316px) rotate(11.121936033040393deg);
    transform-origin: top center;
  }
  100% {
    transform: translateY(0.0px) rotate(5.052030694945111e-15deg);
    transform-origin: top center;
  }
}

<div class="container1">
  <div class="stem1">

  </div>
</div>
<div class="container2">
  <div class="stem2">

  </div>
</div>
<div class="container3">
  <div class="stem3">

  </div>
</div>

Collectives™ on Stack Overflow

need guidance in css animation behaviour for multiple transform

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related