0

Привет. Использую для вертикального центрирования элемента свойства:

top: 50%;
transform: translateY(-50%)

Но когда к элементу применяется анимация:

animation-name: spin;
animation-duration: 1s;
animation-iteration-count: infinite;

То свойство transform перестаёт работать. Почему?

3
  • Так а какая анимация у вас в spin прописана?
    – Cheg
    10 июл 2017 в 14:34
  • @Cheg from{-webkit-transform:rotate(0deg);} to{-webkit-transform:rotate(360deg);} Я так понимаю, что использование rotate перезаписывает правило translateY(-50%); 10 июл 2017 в 14:54
  • Так и напишите для spin: from{transform:rotate(0deg) translateY(-50%);} to{transform:rotate(360deg) translateY(-50%);}
    – Cheg
    10 июл 2017 в 14:57

1 ответ 1

4

.parent {
  width: 200px;
  height: 200px;
  border: 1px solid green;
  position: relative;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.child:hover {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from {
    transform: translateY(-50%) translateX(-50%) rotate(0deg);
  }
  to {
    transform:  translateY(-50%) translateX(-50%) rotate(360deg);
  }
}
<div class="parent">
  <div class="child"></div>
</div>

3
  • Чуть переделать надо. А то когда уводишь курсор - анимация скачет :)
    – Yuri
    10 июл 2017 в 15:23
  • Это уже вторая задача)
    – Alex
    10 июл 2017 в 15:23
  • Не хотят твой ответ принимать никак :)
    – Yuri
    10 июл 2017 в 16:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.