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</buttonsunPausePlayToggle() es una función en JS que controlará la animación.
<div id = "sunSky"este es un div que estoy usando como cielo de fondo
<div id = "sun"></divel div superior es un sol que sale por la derecha y amanece por la izquierda
</div> </body> </html> CSS code:Estoy usando animaciones de fotogramas clave para animar el sol y el cielo.
@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:aquí está el problema que tengo, solo puedo pausar la animación en JS, pero no puedo reproducir.
function sunPausePlayToggle(){ document.getElementById("sunSky").style.animationPlayState = "paused"; document.getElementById("sun").style.animationPlayState = "running"; }Gire #sunButton = animation-play-state: "paused"; en CSS
Y este es el js
function sunPausePlayToggle(){ let sunsky = document.getElementById("sunSky") let sun = document.getElementById("sun") const sky_sty = sunsky.style.animationPlayState === 'running'; const sun_sty = sun.style.animationPlayState === 'running'; sunsky.style.animationPlayState = sky_sty ? 'paused' : 'running'; sun.style.animationPlayState = sun_sty ? 'paused' : 'running'; }