Блог

Главная - Вопросы по программированию - Применение преобразования CSS перед анимацией

Применение преобразования CSS перед анимацией

#css #sass

#css #sass

Вопрос:

У меня следующая ситуация:

 #animation-target {
  transform: rotate(90deg);

  width: 50px;
  height: 100px;
  animation: peek-from-left 1000ms linear;
}

@keyframes peek-from-left {
    0% { transform: translate(-100%, 0) }
    100% { transform: translate(0, 0) }
  }  
 <div id="animation-target">
  <img src="http://placehold.it/50x100"/>
</div>

Преобразование применяется только после анимации, но мне нужно, чтобы оно работало наоборот. Как я могу выполнить преобразование первым?

Ответ №1:

Вы устанавливаете свойство по умолчанию (поворот на 90 градусов), затем переопределяете поворот при анимации горизонтального перевода. Как только анимация завершена, она по умолчанию возвращается к исходному состоянию.

Если вы хотите сохранить вращение на месте, вам также нужно будет указать его в анимации.

Проблема в том, что при повороте с помощью преобразования ширина теперь равна высоте, отсюда и взлом источника преобразования 🙂

 body {
  margin: 0;
}

#animation-target {
  transform: translate(100%, 0) rotate(90deg);
  transform-origin: 50% 25%;
  width: 50px;
  height: 100px;
  animation: peek-from-left 1000ms linear;
}

@keyframes peek-from-left {
  0% { transform: translate(-100%, 0) rotate(90deg) }
  100% { transform: translate(100%, 0) rotate(90deg) }
}  
 <div id="animation-target">
  <img src="http://placehold.it/50x100"/>
</div>

Комментарии:

1. Meh, такая глупая ошибка с моей стороны. Спасибо, что заметили это!