CSS animation re-played after :hover animation - css

Question

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

Answer 1

You should use them within the same animation to avoid the first one to restart:
.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>
And for this particular case you can replace the second animation with a transition:
.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>