Käynnistä
TIEA2120
Web-käyttöliittymien ohjelmointi
CSS
#alue { max-width: 100%; min-height: 200px; max-height: 200px; overflow: hidden; } .eka { margin: 0; padding: 0; animation-duration: 4s; animation-iteration-count: infinite; animation-direction: alternate; animation-name: move; } @keyframes move { from { font-size: 1em; color: black; } 50% { color: blue; } to { font-size: 10em; color: red; } }
HTML
<button id="start">Käynnistä</button> <div id="alue"> <h1>TIEA2120</h1><h1>Web-käyttöliittymien ohjelmointi</h1> </div>
Javascript
/* suorita tämä koodi run-painikkeelle */ /* käynnistetään ensimmäinen animaatio 2000 millisekunnin kuluttua */ let eka = document.querySelector("h1"); eka.style.animationDelay = "2000ms"; eka.className = "eka"; /* käynnistetään toinen animaatio painikkeelle */ document.getElementById("start").addEventListener("click", function() { let toka = document.querySelectorAll("h1")[1]; toka.className ="eka"; });
Konsoli