[Malleys]

Долго ковырялся с разными атрибутами(rotate,scale,skrew) ничего толково не вышло. Задумка как на фото ( вертикальный логотип смещается в одну точку вверх при этом уменьшаясь и выходит из это точки горизонтально увеличиваясь).

Вам нужно описать анимацию, затрагивающую масштаб s и угол поворота φ логотипа, которая состоит из 4-ёх шагов:

• начало (0%) — логотип находится в вертикальном положении, (s = 1, φ = 0°)
• середина (49.9999%) — масштаб логотипа равен нулю, (s = 0, φ = 0°)
• середина (50%) — масштаб логотипа равен нулю и логотип повёрнут на 90°, (s = 0, φ = 90°)
• конец (100%) — логотип находится в горизонтальном положении. (s = 1, φ = 90°)

Теперь эти данные нужно перевести в CSS-анимацию (@keyframes) или SMIL-анимацию (<animateTransform>).

CSS-анимация (@keyframes) — https://codepen.io/Malleys/pen/KKdVRLj?editors=1000
SMIL-анимация (<animateTransform>) — https://codepen.io/Malleys/pen/eYpJrRw?editors=1000

Также вам нужно учитывать точку вращения (см. примеры)