TIEA2120
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; } @keyframes move { /* mistä animoidaan */ from { font-size: 1em; } /* mihin animoidaan */ to { font-size: 10em; } }
HTML
<div id="alue"> <h1>TIEA2120</h1> </div>
Javascript
Konsoli