CSS animation on pause and play with javascript

Question

I need a button along with my animation. By pressing that button i want to pause animation and by pressing again I want to play the animation. I am a bit new with css3 key frames animations so I am confused with this. Here is my code of the animation page, along with its CSS, within the same file.

<!DOCTYPE html>
<head>
    <title>Animation</title>
    <style>
                figure#night-day {
                    margin: 0 auto;
                    font-size: 0;
                    max-width: 1000px;
                    height: 500px;
                    background-color: #000;
                    overflow: hidden;
                    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/starfield_stock_1.jpg);
                    background-size: cover;
                    position: relative;
                }

                @keyframes suntrack {
                    from {
                        transform: rotate(.15turn);
                    }

                    to {
                        transform: rotate(-.85turn);
                    }
                }

                @keyframes moontrack {
                    from {
                        transform: rotate(.15turn);
                    }

                    to {
                        transform: rotate(-.85turn);
                    }
                }

                @keyframes sunpulse {
                    from {
                        box-shadow: 0 0 100px rgba(255, 255, 0, .4), 0 0 100px rgba(255, 255, 0, .4);
                    }

                    to {
                        box-shadow: 0 0 50px rgba(255, 255, 0, .8), 0 0 75px rgba(255, 255, 0, .8);
                    }
                }


                .sun {
                    width: 15vw;
                    height: 15vw;
                    background: #ff0;
                    background: radial-gradient(ellipse at center, #f90 0%, #fc0 60%, #ff0 100%);
                    border-radius: 100%;
                    position: absolute;
                    bottom: -7vw;
                    right: 7vw;
                    transform-origin: -28vw 7vw;
                    animation: suntrack 24s infinite forwards linear, sunpulse 2s alternate infinite;
                }

                .moon {
                    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/moon8.png);
                    width: 15vw;
                    height: 15vw;
                    position: absolute;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 90% 90%;
                    border-radius: 100%;
                    bottom: -7vw;
                    right: 7vw;
                    transform-origin: -28vw 7vw;
                    animation: moontrack 24s infinite backwards linear;
                    animation-delay: 12s;
                    opacity: .8;
                }
    </style>
</head>
<body>

    <figure id="night-day">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop stop-color="rgb(0,0,12)" offset="0%" id="zenith">
                    <animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(32,32,44,0.5);rgba(64,64,92,.8);rgb(74,73,105);rgb(117,122,191);rgb(130,173,219);rgb(148,197,248);rgb(183,234,255);rgb(144,223,254);rgb(87,193,235);rgb(45,145,194);rgb(36,115,171);rgb(30,82,142);rgb(30,82,142);rgb(21,66,119);rgba(22,60,82,0.8);rgba(7,27,38,.5);rgba(1,10,16,.3);rgba(9,4,1,0);rgba(0,0,12,0);rgba(0,0,12,0)"
                             repeatCount="indefinite" />
                    <animate attributeName="offset" dur="24s" values="0;.85;.6;.1;0;0;0;0;0;.01;0;0;0;0;0;0;0;0;0;0;.3,.5,.8,0" repeatCount="indefinite" />
                </stop>

                <stop stop-color="rgb(0,0,12)" offset="100%" id="horizon">
                    <animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(25,22,33,.3);rgba(32,32,44,.8);rgb(58,58,82);rgb(81,81,117);rgb(138,118,171);rgb(205,130,160);rgb(234,176,209);rgb(235,178,177);rgb(177,181,234);rgb(148,223,255);rgb(103,209,251);rgb(56,163,209);rgb(36,111,168);rgb(30,82,142);rgb(91,121,131);rgb(157,166,113);rgb(233,206,93);rgb(178,99,57);rgb(47,17,7);rgb(36,14,3);rgb(47,17,7);rgba(75,29,6,.4);rgba(21,8,0,0);rgba(0,0,12,0)"
                             repeatCount="indefinite" />
                </stop>
            </linearGradient>
            <rect id="sky" x="0" y="0" width="100%" height="100%" style="fill:url(#skyGradient)" />
        </svg>
        <div class="sun"></div>
        <div class="moon"></div>
    </figure>
</body>

UPDATE :

I have succesfully paused and played the sun and the moon classes with following javascript code

<script>
    var sun = document.querySelectorAll('.sun');
    var moon = document.querySelectorAll('.moon');
    document.getElementById('PlayPause').onclick = function () {

        for (var i = 0; i < sun.length; i++) {
            if (sun[i].style.animationPlayState == 'paused') {
                sun[i].style.animationPlayState = 'running';
            }
            else {
                sun[i].style.animationPlayState = 'paused';
            }
        }
        for (var i = 0; i < moon.length; i++) {
            if (moon[i].style.animationPlayState == 'paused') {
                moon[i].style.animationPlayState = 'running';
            }
            else {
                moon[i].style.animationPlayState = 'paused';
            }
        }
    }

</script>

But the background color transition is still going on when I pause the animation, i.e; i guess the sun pulse animation is still working somehow I want to pause the background color change as well . thanks in advance.

I think its the same question here stackoverflow.com/questions/5804444/… — Tawfiq abu Halawah
– Tawfiq abu Halawah, Commented May 17, 2016 at 17:46

Shaggy · Accepted Answer · 2016-05-17 17:41:23Z

You're almost there; you just need to pause your SVG animations as well.

NOTE: I've bound the click event to the figure element for this example.

var figure=document.getElementById("night-day"),
    sky=figure.querySelector("svg"),
    sun=figure.querySelector(".sun"),
    moon=figure.querySelector(".moon");
figure.addEventListener("click",function(){
    sky.animationsPaused()?sky.unpauseAnimations():sky.pauseAnimations();
    sun.classList.toggle("paused");
    moon.classList.toggle("paused");
},0);

#night-day{
    background-color:#000;
    background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/starfield_stock_1.jpg);
    background-size:cover;
    font-size:0;
    height:500px;
    margin:0 auto;
    overflow:hidden;
    position:relative;
    max-width:1000px;
}
.sun{
    animation:suntrack 24s infinite forwards linear,sunpulse 2s alternate infinite;
    background:radial-gradient(ellipse at center, #f90 0%, #fc0 60%, #ff0 100%);
    border-radius:100%;
    bottom:-7vw;
    height:15vw;
    position:absolute;
    right:7vw;
    transform-origin:-28vw 7vw;
    width:15vw;
}
.moon{
    animation:moontrack 24s infinite backwards linear;
    animation-delay:12s;
    background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/moon8.png);
    background-position:center;
    background-repeat:no-repeat;
    background-size:90% 90%;
    border-radius:100%;
    bottom:-7vw;
    height:15vw;
    opacity:.8;
    position:absolute;
    right:7vw;
    transform-origin:-28vw 7vw;
    width:15vw;
}
.paused{
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
}
@keyframes suntrack{
    from{
        transform:rotate(.15turn);
    }
    to{
        transform:rotate(-.85turn);
    }
}
@keyframes moontrack{
    from{
        transform:rotate(.15turn);
    }
    to{
        transform:rotate(-.85turn);
    }
}
@keyframes sunpulse{
    from{
        box-shadow:0 0 100px rgba(255,255,0,.4),0 0 100px rgba(255,255,0,.4);
    }
    to{
        box-shadow:0 0 50px rgba(255,255,0,.8),0 0 75px rgba(255,255,0,.8);
    }
}

<figure id="night-day">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop stop-color="rgb(0,0,12)" offset="0%" id="zenith">
                <animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(32,32,44,0.5);rgba(64,64,92,.8);rgb(74,73,105);rgb(117,122,191);rgb(130,173,219);rgb(148,197,248);rgb(183,234,255);rgb(144,223,254);rgb(87,193,235);rgb(45,145,194);rgb(36,115,171);rgb(30,82,142);rgb(30,82,142);rgb(21,66,119);rgba(22,60,82,0.8);rgba(7,27,38,.5);rgba(1,10,16,.3);rgba(9,4,1,0);rgba(0,0,12,0);rgba(0,0,12,0)" repeatCount="indefinite" />
                <animate attributeName="offset" dur="24s" values="0;.85;.6;.1;0;0;0;0;0;.01;0;0;0;0;0;0;0;0;0;0;.3,.5,.8,0" repeatCount="indefinite" />
            </stop>
            <stop stop-color="rgb(0,0,12)" offset="100%" id="horizon">
                <animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(25,22,33,.3);rgba(32,32,44,.8);rgb(58,58,82);rgb(81,81,117);rgb(138,118,171);rgb(205,130,160);rgb(234,176,209);rgb(235,178,177);rgb(177,181,234);rgb(148,223,255);rgb(103,209,251);rgb(56,163,209);rgb(36,111,168);rgb(30,82,142);rgb(91,121,131);rgb(157,166,113);rgb(233,206,93);rgb(178,99,57);rgb(47,17,7);rgb(36,14,3);rgb(47,17,7);rgba(75,29,6,.4);rgba(21,8,0,0);rgba(0,0,12,0)" repeatCount="indefinite" />
            </stop>
        </linearGradient>
        <rect id="sky" x="0" y="0" width="100%" height="100%" style="fill:url(#skyGradient)" />
    </svg>
    <div class="sun"></div>
    <div class="moon"></div>
</figure>

Collectives™ on Stack Overflow

CSS animation on pause and play with javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related