executing function after running css animation

Question

I am trying to get this function

var rotations = 0
function planet1rotate{
    rotations = rotations + 1
    document.getElementById('rotate').innerHTML = rotations
}

to play after this animation

    @keyframes spin-right {
        100% {transform: rotate(360deg);}
    }

here is the whole code, if it helps

<html>
<head>
<title></title>
<style type="text/css">
    #star{
        position: absolute;
        top: 50%;
        left: 50%;
        height: 100px;
        width: 100px;
        margin-top: -50px;
        margin-left: -50px;
        border-radius: 50%;
        background-color: red;
        animation: spin-right 2s linear infinite;  
    }
    @keyframes spin-right {
        100% {transform: rotate(360deg);}
    }
    #planet1{
        background-color: red;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>
</head>
<body>
<script type="text/javascript">
    var rotations = 0
    function planet1rotate{
        rotations = rotations + 1
        document.getElementById('rotate').innerHTML = rotations
    }
</script>
<h1 id="rotate"></h1>
<div id="star">
    <div id="planet1"></div>
</div>
</body>
</html>

Sturm · Accepted Answer · 2020-04-29 21:50:34Z

4

Check out the animation end event:

const animated = document.querySelector('.animated');

animated.addEventListener('animationend', () => {
  console.log('Animation ended');
});

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event

answered Apr 29, 2020 at 21:50

Sturm

4,2853 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

executing function after running css animation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related