Как зафиксировать блок после transform?

Question

[Space Around]

Как зафиксировать блок после transform? Элемент вращаясь сдвигается вниз, после чего вращаясь направо, у меня получается, что сначала вращаясь сдвигается вниз, потом перемещается там где был, после чего вращаясь направо и опять перемещается обратно, вот как фиксировать после каждого смещения?
Ссылка с кодом https://codepen.io/maxim-vixna/pen/zXYRYm

Comments

[lemonlimelike]

Пробовал классы добавлять? Типа, чтоб классы перебивали друг друга

[Space Around]

lemonlimelike, Да, не помогло

[Rustam Bainazarov]

Максим Виксна, у вас после каждой анимации происходит удаление класса, соответственно, позиция сбрасывается к исходной. Делайте одну общую анимацию.

Либо пишите CSS-анимации последовательно в JS-функции нативными средствами.
Либо пользуйтесь чем-то типа GSAP, где это более автоматизированно с помощью JS.

Answer 1

[Ragtime Kitty]

У вас две разных анимации меняют одно и тоже свойство transform. Вторая перезаписывает значения первой. Используй одну анимацию и расставь тайминги, вместо таймаутов в js. По крайней мере на этом этапе. Сдвигать блок вниз лучше через transform: translate

Если усложнять анимацию, то уже надо будет поменять ее структуру.

А чтобы сохранять свойства из 100%{}, используйте animation-fill-mode: forwards;

Comments

[Space Around]

И как это сделать?

[Space Around]

Ragtime_Kitty, подскажите, пожалуйста, как сделать грамотно, а точнее как научиться делать правильно, может что почитать посоветуете

[Ragtime Kitty]

Максим Виксна, есть множество способов делать анимации в web. Какой из них использовать - зависит от целей и задач анимации, ее сложности и личных предпочтений.

Попробуйте Web Animations API