Nie będę się rozwodził o tym jak zajefajny jest HTML5 w porównaniu do swojego poprzednika. Nie będę Cię też namawiał do stosowania nowych sztuczek CSSowych dedykowanych dla 3ki. Skoro tu jesteś to wiesz czego chcesz.

I) Nice Transition animation:

Transition – czyli po prostu ,,przejście” .

Właściwość tą dodajemy w klasie boksa, który chcemy animować. Lista argumentów transition zawiera kilka modyfikowalnych opcji zmieniających się w określonym czasie.

Np.

 
div.mybox{
  opacity:0.6;
  background:red;
  border-radius: 10px;
  width:100px;
  height:100px;
  transition: transform 1s, opacity 2s, background 2s, width 2s, height 2s;
}

Animujemy, więc następującą listę właściwości:

transform 1s – przekształcenie będzie działać sekundę

opacity 2s – nieprzezroczytość 2sekunty

background 2s – tło przemieni się w ciągu dwóch sekund a

width 3s  , height 3s  – szerokość i wysokość zmieni się z 100px na 300px w ciągu 3 sekund

Cała procedura rozpocznie się zaraz po najechaniu kursorem myszki na naszego boksa (z pseudoklasą :hover) o zaokrąglonych rogach ( border-radius: 10px; ) .

  div.mybox:hover {
   transform: rotate(360deg);
   opacity:1;
   background: green;
   width:300px;
   height:300px;
}

Efekt końcowy:

wykona się obrót, boks stanie się nieprzezroczysty, tło zmieni się płynnie z czerwonego w zielone a szerokość i wysokość powiększą się o 200px.