Css transform: rotate?

Question

[Игорь Касперский]

Всем привет,

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

У меня крестик крутится, да, но он уходит потихоньку наверх. Когда же заканчивается анимация он как щелчком возвращается назад вниз на 2px. Как этого избежать?

Comments

[Nikolay Talanov]

transform-origin для элемента меняли? Это svg элемент?

[Игорь Касперский]

Nikolay Talanov: svg? Нет, наверно) https://jsfiddle.net/pz0oa9qw/ Вот пример.

[hax0r :3]

Можете пример показать?

[Игорь Касперский]

https://jsfiddle.net/pz0oa9qw/

Answer 1

[ILE -Salim]

Все логично! У тебя сначала есть позиция, делаешь анимацию позиция изменяется, после анимации, все на свои места, поэтому тебе надо в позиции указать конечную позицию

Answer 2

[Евгений Петров]

Не буду объяснять, что и к чему, хотя применять -webkit-animation, при этом записывая просто @keyframes — это epic fail... Вам едва ли нужно именно animation в данной ситуации. Достаточно простого transition.

А прыгало потому, что у вас один элемент при увеличении сдвигал другой. Раз уж взялись за трансформацию, то и следуйте ей — вместо изменения width ставьте scale().
Пример