Как мне исправить анимацию?

Question

[Евгения]

Попыталась сделать маленький самодельный свичер на css. А
нимация почему-то получается не плавная. Помогите понять, что я делаю не так.

Comments

[Сергей delphinpro]

Зачем здесь заморочки с анимацией? Переходов (transition) более чем достаточно.
Посмотрите как сделаны уже готовые реализации.

Answer 1

[Sergey]

*,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      border: 0;
      padding: 0;
      white-space: nowrap;
      clip-path: inset(100%);
      clip: rect(0 0 0 0);
      overflow: hidden;
    }

    .wrapper {
      width: fit-content;
      padding: 50px;
      margin: 20px auto;
      outline: 2px dashed tomato;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .check-label {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 20px;
      background-color: lightgrey;
      border: 1px solid grey;
      border-radius: 10px;
      box-shadow: 1px -2px 3px 2px rgba(0, 0, 0, 0.2) inset;
      background: linear-gradient(to right, blue, navy);
      background-repeat: no-repeat;
      background-size: 80%;
      background-position: -50px;
      transition: background-position 0.2s ease;
    }

    .check-label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 23px;
      height: 23px;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      background-color: gainsboro;
      border: 5px solid dimgrey;
      border-radius: 50%;
      transition: left 0.25s ease;
    }

    #check:checked ~ .check-label {
      background-position: left;
    }

    #check:checked ~ .check-label::before {
      left: 27px;
    }