Поворот анимации с условием CSS - PullRequest
Новая
       26

Поворот анимации с условием CSS

0 голосов
/ 14 февраля 2020

Можно ли вращать элемент, используя условие, без использования Javascript.

Я хочу, чтобы рука начала двигаться, когда один из моих внутренних элементов HTML достигает определенной длины. Также возможно остановить руку на 180 градусов вместо того, чтобы вернуться к исходной точке.

Спасибо:)

См. Код ниже: 

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