Ostatnią częścią naszego kursu będą animację. Potrafią one dobrze urozmaicić stronę, lecz należy uważać by nie przesadzić.
Własność transform odpowiada za takie oto właśnie przekształcenia, do tego stosujemy rotate - czyli obrót, scale - skalowanie, translate - przesunięcie oraz skrew.
Jak stworzyć animację?
Najpierw należy ją zdefiniować, czyli co będzie ona robiła. Tak jak na przykładzie poniżej.
@-webkit-keyframes animacja{
0%{
left: -100px;
top: 20px;
}
25%{
transform: scale(1.2);
transform: rotate(90deg);
left: 100px;
top: 40px;
}
50%{
transform: skew(60deg,60deg);
left: 100px;
top: 100px;
}
75%{
transform: translate(50px,50px);
left: 0;
top: 20px;
}
100%{
left: -100px;
top: 20px;
}
}
Do naszego elementu (w tym wypadku obrazka) musimy jeszcze zastosować tę amimację, co robimy tak jak jest przedstawione poniżej.
img{
position: relative;
-webkit-animation: 7s animacja infinite;
}
Efekt:
Inne właściwości
| Nazwa animacji | animation-name | nazwa |
| Czas trwania | animation-duration | liczba [s] |
| Ilość powtórzeń | animation-iteration-count | liczba | infinite |
| Opóźnienie animacji | animation-delay | liczba [s] |
| Tempo odtwarzania | animation-timing-function | linear | ease-in | ease-out | ease-in-out |
| Kierunek animacji | animation-direction | alternate |