CSS transitions są częścią specyfikacji CSS3 . Przekształcenia CSS dostarczają kontroli nad zmianą właściwości stylów. Zamiast natychmiastowo zmienić wartość dostarczają one funkcji, która pozwala dostosować tempo, rodzaj i które właściwości powinny zostać zmienione.

Zmiany zwykle są nazywane „niejawnymi przekształceniami” z uwagi na to, że stany pomiedzy przekształceniami nie są jawnie definiowane przez użytkownika. Użytkownik widzi tylko efekt początkowy i końcowy.

Jakie właściwości CSS możemy animować?

Nie wszystko może być animowane, gdyż przy niektórych właściwościach nie ma to sensu. Pełną listę właściwości, którą możesz zmodyfikować znajdziesz tutaj

.trans-box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.trans-box:hover {
background-color: #FFCCCC;
width:200px;
height:200px;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}

<div class="trans-box"></div>

Powyższy kod wyświetli prostokąt, który po najechaniu zmieni swoje właściwości takie jak wysokość, szerokość i kolor tła

Inny bardziej zaawansowany przykład wykorzystania CSS transitions