CSS animation re-played after :hover animation

Refresh

December 2018

Views

26 time

3

In below code, the animation plays fine for both initialization and for hover, however when I stop hovering the initial animation is re-played. How do I stop this behaviour? Thanks,

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);
  }
}
Rik

1 answers

3

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

.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>