need guidance in css animation behaviour for multiple transform-CodePudding

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 >
  <div >

  </div>
</div>
<div >
  <div >

  </div>
</div>
<div >
  <div >

  </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.

CodePudding user response：

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 >
  <div >

  </div>
</div>
<div >
  <div >

  </div>
</div>
<div >
  <div >

  </div>
</div>