Анимация CSS качание из стороны в сторону

Question

У меня есть картинка svg в виде знака вопроса, вот такая: "?". Нужно сделать, чтобы вопросительный знак покачивался из стороны в сторону, т.е, отклонялся влево-вправо на 10 градусов, с центром в точке (которая внизу вопросительного знака). Возможно ли это сделать с помощью CSS? UPD Прошу пример реализации, поскольку, в анимациях не разбираюсь.

Answer 1

Да, это возможно реализовать через css, вот пример:

@keyframes swing {
      0% {
        transform: rotate(-10deg);
      }
      50% {
        transform: rotate(10deg);
      }
      100% {
        transform: rotate(-10deg);
      }
}

svg {
      width: 200px;
      height: 200px;
      animation: swing 1s ease-in-out infinite alternate;
      transform-origin: 50% 80%;
}

<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 19H12.01M8.21704 7.69689C8.75753 6.12753 10.2471 5 12 5C14.2091 5 16 6.79086 16 9C16 10.6565 14.9931 12.0778 13.558 12.6852C12.8172 12.9988 12.4468 13.1556 12.3172 13.2767C12.1629 13.4209 12.1336 13.4651 12.061 13.6634C12 13.8299 12 14.0866 12 14.6L12 16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

@keyframes swing - это ключевые кадры анимации
x% - описывает состояние элемента на определённом этапе анимации, состояние изменяется по ходу анимации от одного к другому
transform - свойство модификации координатного пространства элемента
rotate - способ модификации (а именно поворот)
10deg - 10 градусов
animation - задаёт анимацию объекту (параметры)
transform-origin - свойство позволяющее сместить точку в отношении которой происходит модификация объекта (мы её ставим на точку вопросительного знака)

Про трансформации объектов можно почитать тут

БЛОГ НА HUSL

Анимация CSS качание из стороны в сторону

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