I wanted to create a gene like twisty rotating effect purely with HTML and CSS. I can animate the the whole div to rotate but I couldn't figure out how to make it rotate horizontally gradually from bottom to top. Is this possible through pure HTML and CSS? If it is possible, any ideas how to do this?

CodePudding user response：

1. Rotate the element to a certain angle x in the first frame
2. Rotate the element to -x angle in the second frame
3. Rotate it back to x
4. Repeat (if we want continuous animations)

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

The procedure is the same exactly as for above, only replacing rotation with x-axis translation. This is for Horizontal animate as you wanted.

@keyframes horizontal-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateX(5px) }
  50% { transform: translateX(-5px) }
  75% { transform: translateX(5px) }
  100% { transform: translateX(0) }
}

CodePudding user response：

Create multiple divs and animate them all with each having a delay.

.wrapper {
  width: 150px;
  height: 180px;
  display: flex;
  flex-direction: column;
}

.item {
  width: 100%;
  height: 25%;
  background: linear-gradient(to left, red, blue);
  box-shadow: 1px 1px 5px rgba(0,0,0,.3);
}


#a {
  animation: rotate 3s linear infinite;
}
#b {
  animation: rotate 3s linear infinite;
  animation-delay: .1s;
}
#c {
  animation: rotate 3s linear infinite;
  animation-delay: .2s;
}
#d {
  animation: rotate 3s linear infinite;
  animation-delay: .3s;
}
#e {
  animation: rotate 3s linear infinite;
  animation-delay: .4s;
}
#f {
  animation: rotate 3s linear infinite;
  animation-delay: .5s;
}
#g {
  animation: rotate 3s linear infinite;
  animation-delay: .6s;
}
#h {
  animation: rotate 3s linear infinite;
  animation-delay: .7s;
}
#i {
  animation: rotate 3s linear infinite;
  animation-delay: .8s;
}
#j {
  animation: rotate 3s linear infinite;
  animation-delay: .9s;
}
#k {
  animation: rotate 3s linear infinite;
  animation-delay: 1s;
}
#l {
  animation: rotate 3s linear infinite;
  animation-delay: 1.1s;
}

@keyframes rotate {
  0% {
    transform: rotateY(0) rotateZ(0) skew(0deg);
  }
  50% {
    transform: rotateY(180deg) rotateZ(5deg) skew(30deg);
  }
  100% {
    transform: rotateY(360deg) rotateZ(0) skew(0);
  }
}

<div >
  <div  id="a"></div>
  <div  id="b"></div>
  <div  id="c"></div>
  <div  id="d"></div>
  <div  id="e"></div>
  <div  id="f"></div>
  <div  id="g"></div>
  <div  id="h"></div>
  <div  id="i"></div>
  <div  id="j"></div>
  <div  id="k"></div>
  <div  id="l"></div>
</div>