Мобильная версияКак я могу запустить два преобразования одно за другим с задержкой в CSS? ⇐ CSS
-
Anonymous
Как я могу запустить два преобразования одно за другим с задержкой в CSS?
Я создаю кнопку меню с тремя полосками (иногда называемую кнопкой-гамбургером), которая при нажатии превращается в букву X. Я не могу понять, как запустить 2 преобразования в одном элементе без одновременного запуска анимации.
Этот скрипт вроде как работает, но оба они срабатывают одновременно:
transform: Translate(10px, 10px) Rotate(45deg); Моя цель — завершить перевод, а затем начать поворот. (Мне нужно использовать переходы, потому что они защищены от спама и не позволяют использовать анимацию ключевых кадров.) Я попробовал вместо этого использовать что-то вроде этого:
transform: Translate(10px, 10px); преобразование: поворот (45 градусов); Но активируется только нижний. Чтобы это исправить, я добавил это:
переход: преобразование 0,4 с 0,4 с, поворот 0,4 с 0,4 с; в микс, но это только добавило задержку к одному из преобразований, оставив другое сломанным. Моей последней идеей было использовать rotate(deg) вместо translate(px), но, похоже, способа центрировать вращение не существует. При необходимости я могу опубликовать свой полный код.
Я создаю кнопку меню с тремя полосками (иногда называемую кнопкой-гамбургером), которая при нажатии превращается в букву X. Я не могу понять, как запустить 2 преобразования в одном элементе без одновременного запуска анимации.
Этот скрипт вроде как работает, но оба они срабатывают одновременно:
transform: Translate(10px, 10px) Rotate(45deg); Моя цель — завершить перевод, а затем начать поворот. (Мне нужно использовать переходы, потому что они защищены от спама и не позволяют использовать анимацию ключевых кадров.) Я попробовал вместо этого использовать что-то вроде этого:
transform: Translate(10px, 10px); преобразование: поворот (45 градусов); Но активируется только нижний. Чтобы это исправить, я добавил это:
переход: преобразование 0,4 с 0,4 с, поворот 0,4 с 0,4 с; в микс, но это только добавило задержку к одному из преобразований, оставив другое сломанным. Моей последней идеей было использовать rotate(deg) вместо translate(px), но, похоже, способа центрировать вращение не существует. При необходимости я могу опубликовать свой полный код.
