Можно ли запустить анимацию при нажатии на кнопку не прибегая к JS?

Question

Можно ли запустить анимацию при нажатии на кнопку не прибегая JS? Если да то какими методами можно это организовать всем спасибо за внимание.

Answer 1

Какого рода анимацию-то? ) можете чекбокс в виде кнопки сверстать, и на его основе запускать transition в :checked состоянии, например. Для самой кнопки, или соседних (по крайней мере на одном уровне) элементов.

p {
  transition: all 1s ease;
  color: red;
  padding: 1rem;
  
}
:checked ~ p{
  color: blue;
  background-color: yellow;
}

<input type="checkbox">
<p>qwe</p>

Answer 2

input {
  opacity: 0;
}

input:checked+div {
  background: #fc0;
  animation: eye 3s ease-in-out ;
}

 @keyframes eye {
    0% { transform: none; }   
    100% { transform: translate(50px); }
   }

<label for="s">Кнопка

</label>
<input type="checkbox" id="s" />
<div>
  Анимация
</div>

Вариант автора

Чтобы input:checked срабатывал, по иерархии, input && элемент с анимацией должны быть потомками одного родителя. И input должен быть выше элемента

.cssload-container {
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
}

.cssload-speeding-wheel {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border: 10px double;
  border-radius: 50%;
  position: relative;
}

input:checked+.cssload-speeding-wheel:before,
input:checked+.cssload-speeding-wheel:after {
  content: "";
  display: block;
  width: 6px;
  height: 150%;
  background: white;
  position: absolute;
  z-index: 1;
  left: calc(50% - 3px);
  top: -25%;
  animation: cssload-spin 675ms infinite linear ease-in-out;
  -o-animation: cssload-spin 675ms infinite linear;
  -ms-animation: cssload-spin 675ms infinite linear;
  -webkit-animation: cssload-spin 675ms infinite linear;
  -moz-animation: cssload-spin 675ms infinite linear;
}

@keyframes cssload-spin {
  100% {
    transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes cssload-spin {
  100% {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-ms-keyframes cssload-spin {
  100% {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

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

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

.cssload-speeding-wheel:after {
  transform: rotate(90deg)
}

<div class="cssload-container">
  <input type="checkbox" id="s" />
  <div class="cssload-speeding-wheel">
  </div>
</div>
<label for="s">Кнопка</label>

БЛОГ НА HUSL

Можно ли запустить анимацию при нажатии на кнопку не прибегая к JS?

Ответы (2 шт):