hover and play animation once instead of looping

Question

If you look at my code and run it.

@-webkit-keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(180deg); }
}

@-webkit-keyframes inner-circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(-180deg); }
}

#one {
    position: absolute;
    left: 500px;
    top: 200px;
    width:100px;
    height:100px;
    border-radius: 50px;
    background-color: #000000;
}

#two {
    width:100px;
    height:100px;
    margin: 0px auto 0;
    color:orange;
    font-size:100px;
    line-height:1;

    transform-origin:50% 200px;
}


 #one:hover > div {
     animation: circle 1s linear infinite;
    -webkit-animation: circle 1s linear infinite;
 }
#one:hover > div > div {
     animation: inner-circle 1s linear infinite;
    -webkit-animation: inner-circle 1s linear infinite;
 }
</style>

    <div id="one">
        <div id="two"><div id="three">☻</div></div>
    </div>

you will notice that the smile face keeps on looping the animation of rotating 180deg. I don't want this. I only want it to do the animation once every time I hover over the black circle. How do I do this?

Answer 1

If you don't want the animation to occur infinitely, remove infinite from the animation shorthand.

In addition, you will also need to add forwards in order to to prevent the animation from resetting each time. When adding forwards to the animation shorthand, you are essentially changing the property animation-fill-mode from the default value of none to forwards.

From MDN:

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.

#one:hover > div {
    animation: circle 1s linear forwards;
    -webkit-animation: circle 1s linear forwards;
}
#one:hover > div > div {
    animation: inner-circle 1s linear forwards;
    -webkit-animation: inner-circle 1s linear forwards;
}