Как назначить один keyframes на отмеченное и неотмеченное состояние input type=radio?

Question

Как назначить один keyframes на отмеченное и неотмеченное состояние input type=radio?

Рейтинг: 1Ответов: 0Опубликовано: 09.04.2023

:root {
  --accent: #1bba4b;
  --padding: 2px;
  --m: 40px;
  --f-m: 16px;
}

label {
    background: var(--accent);
    height: var(--m);
    padding-left: calc(var(--m) + var(--padding));
    display: inline-block;
    position: relative;
}

input[type=radio] {
    display: none;
}

label::before{
    content: "";
    position: absolute;
    background-size: 40px;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
}

label:has(input[type=radio])::before { /* <<< */
  content: "";
  background-image: url('https://www.clker.com/cliparts/c/q/l/t/l/B/radiobutton-unchecked-sm-md.png');
  animation: rotateX 1s linear forwards;
}

label:has(input[type=radio]:checked)::before { /* <<< */
  content: "";
  animation: rotateX 1s linear forwards;
  background-image: url('https://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-md.png');
}

@keyframes rotateX {
  0% {
    transform: rotateX(0deg);
  }  
 
   100% {
     transform: rotateX(180deg);
   }
}

<head>
</head>
<body>
  <form>
    <label>
      <input type="radio" name=test>
      Radio button 1
    </label>
    <br>
      
    <label>
      <input type="radio" name=test>
      Radio button 2
    </label>
    <br>
      
    <label>
      <input type="radio" name=test>
      Radio button 3
    </label>
  </form>
</body>
</html>

У меня есть 2 селектора, отмеченные <<<, у обоих должна быть анимация rotateX. Почему у них не работает свойство animation: rotateX, когда назначено на оба селектора, но при этом работает, когда назначено только на 1 из них?

css css-animation radio-input keyframes

Источник: Stack Overflow на русском

Как назначить один keyframes на отмеченное и неотмеченное состояние input type=radio?

Ответы