Запуск перехода в середине анимации CSS - PullRequest
Новая
       78

Запуск перехода в середине анимации CSS

1 голос
/ 07 мая 2020

Пытались запустить переход, используя :hover в запущенной анимации, используя CSS, в приведенном ниже примере только background-color изменяется на :hover, но свойство transform запускается только после остановки анимации . Как я могу вызвать transform: rotate во время анимации?

Кроме того, мой начальный background-color: red кажется исчезает, когда я перезагружаю страницу без явного запуска :hover. Я предполагаю, что это вызвано transition-duration, можно ли этого избежать, используя только CSS? 

.container {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.red {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: animation;
  animation-duration: 5s;
  animation-delay: 0;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  transition-duration: 5s;
  transition-property: all;
}

.red:hover {
  transform: rotate(180deg);
  background-color: teal;
}

@keyframes animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}
<body>
  <div class="container">
    <div class="red"></div>
  </div>
</body>

1 Ответ

3 голосов
/ 07 мая 2020

Преобразования не складываются таким образом. Один из способов обойти это ограничение - использовать родительский элемент для преобразования поворота. 

.container {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.red {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: animation;
  animation-duration: 5s;
  animation-delay: 0;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  transition-duration: 5s;
  transition-property: all;
}

.red:hover {
  background-color: teal;
}

.wrap {
  transition: all 5s;
}

.wrap:hover {
  transform: rotate(180deg);
}

@keyframes animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}
<body>
  <div class="container">
    <div class="wrap">
      <div class="red"></div>
    </div>
    
  </div>
</body>
...