CSS-animaatio
CSS-animaatio voidaan tehdä kirjoittamalla ensin @keyframes osio, jossa määritellään animaation kulku prosentteina ja kuhunkin animaation vaiheeseen kuuluvat CSS ominaisuudet.Ominaisuuksia voi olla useita.
Animoitavan elementin tyylimäärityksessä viitataan @keyframes osion nimeen.
Esimerkiksi alla @keyframes osion nimi on "example", johon viitataan #animoitava-laatikon tyylimäärityksessä: animation-name: example;
Animoitavan elementin tyylimäärityksessä määritellään myös animaation muut ominaisuudet,
kuten animaation kesto ja kuinka monta kertaa animaatio suoritetaan.
<STYLE TYPE="text/css">
@keyframes example {
0% {top:30px;left:30px;}
25% {top:30px;left:100px;}
50% {left:30px;top:100px;}
100% {top:30px;left:30px;}
}
#animoitava {
position: relative;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
</STYLE>
<div id="animoitava">Jotain sijoitettuna div-laatikkoon</div>
|
Jotain sijoitettuna div-laatikkoon
|
Animaation css-määrityksiä
Animaation ominaisuuksista voidaan määritellä esimerkiksi:| Ominaisuus | Selitys | Mahdollisia arvoja |
| animation-name | Animaation nimi | keksi yhtenäinen nimi, ei välilyöntejä tai erikoismerkkejä |
| animation-duration | Animaation kesto | 4s, 50ms, 0.8s |
| animation-timing-function | Animaation etenemisen tapa | linear, ease, ease-in, ease-out, ease-in-out |
| animation-delay | Animaation viive | 2s, 30ms, 0.8s |
| animation-direction | Animaation suunta | normal, reverse, alternate, alternate-reverse |
| animation-iteration-count | Suorituksien lukumäärä | 0, 3, 2.5, infinite |
| animation-play-state | Animaation tila | paused, running |
Esimerkkejä
<STYLE TYPE="text/css">
@keyframes pyoriva {
0% {transform: rotateY(0deg);}
25% {transform: rotateY(90deg);}
50% {transform: rotateY(180deg);}
75% {transform: rotateY(270deg);}
100% {transform: rotateY(360deg);}
}
#otsikko {
position: relative;
top : 20px;
left : 100px;
font-size : 30px;
font-weight : bold;
}
#logo {
position: relative;
top: -35px;
left: 20px;
width: 50px;
height: 50px;
animation-name: pyoriva;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
</STYLE>
<div id="otsikko">
Minun hieno otsikko, <br />jossa on logo edessä
</div>
<div id="logo">
<img src="kuvat/kasvi.jpg" width="50px" />
</div>
|
Minun hieno otsikko,
jossa on logo edessä 
|
<STYLE TYPE="text/css">
@keyframes varimuutos {
0% {color : #ff0000;font-size : 30px;}
20% {color : #0000ff;font-size : 32px;}
40% {color : #00ff00;font-size : 34px;}
60% {color : #ffff00;font-size : 36px;}
80% {color : #00ffff;font-size : 32px;}
100% {color : #ff0000;font-size : 30px;}
}
#variotsikko {
position: relative;
top : 20px;
left : 100px;
font-size : 30px;
font-weight : bold;
color : #ff0000;
animation-name: varimuutos;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}
</STYLE>
<div id="variotsikko">
Minun hieno<br /> värillinen otsikko
</div>
|
Minun hieno
värillinen otsikko |
<STYLE TYPE="text/css">
@keyframes animLink {
0% {transform: scale(1);}
50% {transform: scale(1.25);}
100% {transform: scale(1);}
}
.muuttuvalinkki {
position: relative;
top : 20px;
left : 100px;
font-size : 20px;
width : 130px;
height : 30px;
border : solid 1px #000000;
padding : 5px;
border-radius: 3px;
background-color: #dddddd;
}
.muuttuvalinkki:hover {
animation-name: animLink;
animation-duration: 0.4s;
animation-iteration-count: 1;
animation-timing-function: linear;
}
</STYLE>
<div class="muuttuvalinkki">
<a href="http://www.matikki.fi">Muuttuva linkki </a>
</div>
|