TIEA2120
Web-käyttöliittymien ohjelmointi
CSS
#alue { /* säädetään alueelle koko ja varmistetaan, että mahdollinen liian suuri sisältö piilotetaan ylimenevältä osalta */ max-width: 100%; min-height: 200px; max-height: 200px; overflow: hidden; } h1 { margin: 0; padding: 0; /* määritellään animaation kestoksi 4s, animointia suoritetaan loputtomasti ja eestaas */ animation-duration: 4s; animation-iteration-count: infinite; animation-direction: alternate; /* animaatiossa käytetyn keyframes-lohkon nimi */ animation-name: move; } /* aloitetaan toisen lohkon animointi 1 sekunnin (1000 millisekuntia) myöhemmin */ .toinen { animation-delay: 1000ms; } @keyframes move { /* mistä animoidaan */ from { font-size: 1em; color: black; } 50% { color: blue; } /* mihin animoidaan */ to { font-size: 10em; color: red; } }
HTML
<div id="alue"> <h1>TIEA2120</h1><h1 class="toinen">Web-käyttöliittymien ohjelmointi</h1> </div>
Javascript
Konsoli