Задать вопрос
@HHabar
Новичок
javascript

Css transform: rotate?

Всем привет, 
@keyframes example {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(180deg);}
}

У меня крестик крутится, да, но он уходит потихоньку наверх. Когда же заканчивается анимация он как щелчком возвращается назад вниз на 2px. Как этого избежать?
  • Вопрос задан
  • 324 просмотра
4 комментария
Подписаться 2 Оценить 4 комментария
Решения вопроса 2
ILE-Salim
@ILE-Salim
Web-developer
Все логично! У тебя сначала есть позиция, делаешь анимацию позиция изменяется, после анимации, все на свои места, поэтому тебе надо в позиции указать конечную позицию
Ответ написан
Комментировать
Комментировать
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Не буду объяснять, что и к чему, хотя применять -webkit-animation, при этом записывая просто @keyframes — это epic fail... Вам едва ли нужно именно animation в данной ситуации. Достаточно простого transition.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Анимация логотипа
24 апр. 2024, в 00:08
20000 руб./за проект
Разработка дизайна раздела «Статьи» на сайте «Мир отходов»
23 апр. 2024, в 23:01
10000 руб./за проект
Дизайн личного кабинета (клиентская часть)
23 апр. 2024, в 22:37
500 руб./в час
Ещё заказы