checkbox переключатель с анимацией ожидания

Question

не работает анимация бордера у переключателя вместе с изменением положения. При отключении animation: rotation 1s linear infinite; ползунок двигается

@keyframes rotation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    } 

    input{
        position: relative;
        -webkit-appearance:none;
        width: 60px;
        height: 6px;
        background: #e4e4e4;
        border-radius: 5px;
        cursor: pointer;

    }

    input:before{
        content: "";
        position: absolute;
        top:-12px;
        left:0;
        width: 30px;
        height: 30px;
        background:#ccc;
        border-radius: 50%;
        transition: 0.5s;
        border:1px solid #ccc;
    }

    input:checked:before{
        transform: translateX(30px);
        background:#ffbd45;
        border: 1px solid #ffbd45;
        border-bottom-color: #FF3D00;
        //animation: rotation 1s linear infinite;
    }

    input.c1:checked:after{
        width:0;
        border-radius: 10px;
        left:20%;
        transform: translate(30px,-50%);
    }

<input type="checkbox">

Answer 1

Если вы хотите что бы анимация воспроизводилась и при этом передвигался ползунок то необходимо добавить финальное положение бегунка

input:checked:before{
        transform: translateX(30px);
        background:#ffbd45;
        border: 1px solid #ffbd45;
        border-bottom-color: #FF3D00;
        animation: rotation 1s linear infinite;
        left:100%; /*вот это*/
    }

И не забывайте что комментарии в CSS оформляют /*code*/

Answer 2

Всё дело в том, что Вы переопределяете в анимации значение свойства transform, а нужно указывать весь набор трансформаций применяемых к элементу в том же порядке, при этом изменяя только необходимые значения.

К счастью с недавних пор появилась возможность управлять трансформациями независимо:

@keyframes rotation { to { rotate: 1turn; } }

input {
  -webkit-appearance: none;appearance: none;
  position: relative;
  height: 6px;
  width: 60px;
  background: #e4e4e4;
  border-radius: 5px;
  cursor: pointer;
}

input::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  height: 30px;
  width: 30px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background: #ccc;
  transition: 0.5s;
}

input:checked::before {
  border: 1px solid #ffbd45;
  border-bottom-color: #FF3D00;
  translate: 30px;
  background: #ffbd45;
  animation: rotation 1s linear infinite;
}

<input type="checkbox">

БЛОГ НА HUSL

checkbox переключатель с анимацией ожидания

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