CODEWITHSUNDEEP
javascripthtmlcss
Alex
Alex

Reputation: 23

executing function after running css animation

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>

Upvotes: 0

Views: 30

Answers (1)

Sturm
Sturm

Reputation: 4285

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

Upvotes: 4

Related Questions