Animacje

W3C dodając animacje wyznacza nowy standard i kierunek, wizualna część witryn internetowych ma być ciekawsza i interaktywna dla użytkownika. Wyznaczony kierunek mają spełnić przejścia i animacje.

{
  height: ;
  width: ;
  background-color: ;
  animation: nazwa czas-wykonania powtarzalność opóźnienie ;
}

@keyframes nazwa {
    0%   { metody z wartościami ; }
    50%  { metody z wartościami ; }
    100% { metody z wartościami ; }
}

{
  animation: guma 5s linear infinite;
}

@keyframes guma {
    0%   {background: #FF0000; }
    50%  {background:  	#FFCCCC; opacity:0.5; width:320px; height: 25px; border-radius:25px; }
    60%  {background:  #FF6666; opacity:0.9; width:80px; height: 33px; border-radius:15px;}
    80%  {background:  #FF3333; opacity:0.9; width:150px; height: 38px; border-radius:7px;}
    100% {background: #FF0000; opacity:1; width:100px; height: 40px;}
}

Animacje bazują na klatkach, które wyświetlane kolejno po sobie tworzą animacje. Czas wyświetlania poszczególnej klatki można zmieniać za pomocą wartości procentowej, animacja zaczyna się od 0%, a kończy na 100%. Wewnątrz klatek wpisywane są operacje jakie wykona ta klatka. Dodatkowo można dodać szereg atrybutów jak czas wykonywania się animacji, czy ma być powtarzana lub określić opóźnienie w uruchomieniu animacji.

 
{  
animation:kula 10s linear infinite;
animation-direction:normal; 
}

@keyframes kula{
0% {background-color:#090; top:50px; left:170px; transform:rotate(-1800deg);}
16.7% {background-color:#090; top:110px; left:296px;}
33.3% {background-color:#0C0; top:280px; left:293px; border-radius:5px;}
50% {background-color:#0C0; top:345px; left:166px; border-radius:10px;}
66.7% {background-color:#0F0; top:280px; left:11px; border-radius:15px;}
83.3% {background-color:#0F0; top:113px; left:12px; border-radius:20px;}
100% {background:#090;background-color:#0F6; top:45px; left:170px; border-radius:20px;}
}

W klatach można, też zmieniać właściwości obiektu jak kształt, kolor, wykonywać na nim operacje takie jak w transformacjach. Jeśli nie zostaną podane nowe wartości w nowych klatkach to będą dziedziczone te z poprzednich

Do góry