Acionar animações CSS em JavaScript

Question

Jun 30, 2017, 02:34 PM

html5 javascript css-animations html css

Acionar animações CSS em JavaScript

Não sei como usar o JQuery, por isso preciso de um método que possa disparar uma animação usando apenas JavaScript. Preciso chamar / acionar animação CSS quando o usuário rola a página. Por favor me ajude a sair deste problema.

<html>

<head>
    <style>

        *
        {
            margin:0px;
        }
        #logo
        {
            position:fixed;
            top:200px;
            height:200px;
            width:1000px;
            left:5%;
            z-index:4; 


            opacity:0.8;
        }
        #earthlogo
        {
            position: fixed;
            top:200px;
            height:120px;
            align-self: center;
            left:5%; 
            margin-left: 870px;
            margin-top: 60px;
            z-index:4;


            opacity: 0.9;
        }
         @keyframes anim
        {
            50%
            {
                filter:blur(10px);
                transform: rotate(-15deg);
                box-shadow:0px 0px 10px 3px;
            }
            100%
            {
                height:100px;
                width:500px;
                left:10px;
                top:10px;
                box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.7);
                background-color: rgba(0, 0, 1, 0.3);
                opacity: 0.7;
            }
        }

        @keyframes anim2
        {
                 50%
            {
                filter:blur(40px);
                transform: rotate(-15deg);
            }
            100%
            {
                height:60px;
                width:60px;
                left:10px;
                top:10px;
                margin-left: 435px;
                margin-top: 30px;
                opacity: 0.8;
            }
        }
        body
        {
            height: 2000px;
        }
        #backstar
        {
            position:fixed;
            width: 100%;
            z-index: 1;
        }
        #earth
        {
            position: absolute;
            width:100%;
            z-index: 2;
            top: 300px;
        }
    </style>
    <script>
        function start()
        {
            document.getElementById('logo').style.animation = "anim 2s 2s forward";
            document.getElementById('earthlogo').style.animation = "anim2 2s 2s forward";
        }

</head>

<body>

    <img src="logo.png" id="logo" onclick="start();">
    <img src="earthlogo.gif" id="earthlogo" onscroll="start();">
    <img src="earth.png" id="earth">
    <img src="stars.jpg" id="backstar">

</body>