0

Is it possible to rotate an element using a condition with out using Javascript.

I basically want the hand to start moving when one of my innerHTML elements reaches a certain length. Also is it possible to stop the hand at 180 degrees instead of it going back to its starting point.

Thanks :)

See code below: 

.hand {
  width: 20px;
  height: 190px;
  background-color: #005bdb;
  position: absolute;
  left: 0;
  transform-origin: bottom;
  -webkit-animation: spin 30s linear;
  -moz-animation: spin 30s linear;
  animation: spin 30s linear;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(180deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(180deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
<div class="hand">
</div>
Alan M
  • 616
  • 5
  • 15
cpog90
  • 97
  • 6
  • The conditional thing is not possible without Javascript, but you can use `animation-fill-mode: forwards` in order to keep the last animation value. – Maharkus Feb 14 '20 at 16:20
  • Thanks Maharkus, is it possible to use an if statement in JS and then make it start but keeping the webkit rotate animation in tact or should I just do the rotation animation using JS and starting from scratch? – cpog90 Feb 14 '20 at 16:25
  • I would recommend you to do something like checking for the [height](https://stackoverflow.com/questions/526347/how-do-you-get-the-rendered-height-of-an-element) of the elements, and if it's above the threshold where you want the animation to start, to [add a class](https://api.jquery.com/addClass/) to your `.hand`, which includes the CSS for the animation. – Maharkus Feb 14 '20 at 16:35

0 Answers0