HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<title>Keyframe Animations</title>
<link rel="stylesheet" href="SunLabcss.css" type="text/css"/>
<script src="scriptSun.js"></script>
</head>
<body>
<button id = "sunButton" onclick="sunPausePlayToggle()">PLAY/PAUSE</button
sunPausePlayToggle() method in JS will manage the animation .
<div id = "sunSky"
this div serves as a sky background
<div id = "sun"></div
the upper div is a sun that rises from right and sets on the left
</div>
</body>
</html>
CSS code:
I am using keyframe animations to animate the sun and sky.
@keyframes risesky {
0% {
top: 100%;
left : 100%;
background-color: red;
}
50% {
left:50%;
top: 10%;
background-color: yellow;
}
100% {
background-color: orangered;
top: 100%;
left: 0%;
}
}
@keyframes sky {
0% , 100% {
background-color: #1c1341;
}
10% {
background-color: darkorange;
}
50% {
background-color: skyblue;
}
80% {
background-color: crimson;
}
}
#sunButton{
animation-play-state: running;
}
#sun {
position: relative;
border-radius: 50%;
width: 80px;
height: 80px;
animation: risesky 11s infinite;
}
#sunSky {
height: 500px;
overflow: hidden;
animation: sky 11s infinite both;
}
Javascript code:
Here's the issue I'm facing, I can only pause the animation in JS, but cannot play it back.
function sunPausePlayToggle(){
document.getElementById("sunSky").style.animationPlayState = "paused";
document.getElementById("sun").style.animationPlayState = "running";
}