CSS-анимация воспроизводится после: анимация наведения - PullRequest
Новая
       9

CSS-анимация воспроизводится после: анимация наведения

0 голосов
/ 02 сентября 2018

В приведенном ниже коде анимация воспроизводится нормально как для инициализации, так и для наведения, однако, когда я прекращаю зависание, начальная анимация воспроизводится заново. Как мне остановить это поведение? Спасибо,

Rik 

.logoImage2{
  width:100%;
  -webkit-filter: drop-shadow(12px 8px 4px #222);
  filter: drop-shadow(12px 8px 3px #222);
  padding-bottom:2rem;
  animation: moveInTopRight 5s ease-out;
}

.logoImage2:hover{
  animation: spinY 5s ease-in-out;
}


   @keyframes moveInTopRight {
      0% {
        opacity: 0;
        transform: translate3d(50rem,-50rem,50rem) rotateZ(0);

  }
  80% {
    opacity: .5;
    transform: translate3d(5rem,5rem,5rem) rotateZ(180deg);

  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0) rotateZ(360deg);

  }
}
@keyframes spinY {
  0% {
 transform:rotateY(0);

  }
  50% {

    transform: rotateY(180deg);

  }
  100% {
    transform: rotateY(360deg);
  }
}

1 Ответ

0 голосов
/ 02 сентября 2018

Вы должны использовать их в одной и той же анимации, чтобы избежать перезапуска первой: 

.box{
  width: 200px;
  height:200px;
  background:red;
  margin:50px;
  animation: moveInTopRight 5s ease-out;
}

.box:hover {
  animation:moveInTopRight 5s ease-out, spinY 5s ease-in-out;
}

@keyframes moveInTopRight {
  0% {
    opacity: 0;
    transform: translate3d(50rem, -50rem, 50rem) rotateZ(0);
  }
  80% {
    opacity: .5;
    transform: translate3d(5rem, 5rem, 5rem) rotateZ(180deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateZ(360deg);
  }
}

@keyframes spinY {
  0% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
<div class="box">

</div>

И для этого конкретного случая вы можете заменить вторую анимацию переходом: 

.box{
  width: 200px;
  height:200px;
  background:red;
  margin:50px;
  animation: moveInTopRight 5s ease-out;
  transition:0s;
}

.box:hover {
    transform: rotateY(360deg);
    transition:transform 5s  ease-in;
}

@keyframes moveInTopRight {
  0% {
    opacity: 0;
    transform: translate3d(50rem, -50rem, 50rem) rotateZ(0);
  }
  80% {
    opacity: .5;
    transform: translate3d(5rem, 5rem, 5rem) rotateZ(180deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateZ(360deg);
  }
}
<div class="box">

</div>
...