В CSS3 Вы можете создавать эффекты динамического перехода.

CSS3 Переходы

Обратите внимание: данное свойство поддерживается в браузерах IE 10+, Chrome, Firefox и Opera. Для браузера Safari требуется добавить префикс -webkit.

С помощью нового CSS3 свойства transition Вы можете создавать эффекты перехода.

Для создания переходов необходимо указать какое CSS свойство будет изменятся и скорость выполнения этих изменений в секундах.

#wrap1
{
width:200px;
transition: width 4s;
}
#wrap1:hover
{
width:500px;
}

Для того, чтобы добавить эффект перехода к нескольким свойствам просто перечислите их названия через запятую.

#wrap1
{
background-color:#E869AA;
color:#000;
width:200px;
transition: color 4s, width 4s, background-color 4s;
}
#wrap1:hover
{
color:#FFFFFF;
width:400px;
background-color:#880045;
}

Функции смягчения

Плавность выполнения переходов контролируется с помощью функций смягчения. В CSS3 существуют несколько видов таких функций:

• linear
• ease (функция смягчения по умолчанию)
• ease-in
• ease-out
• ease-in-out
• cubic-bezier(x,x,x,x) (поведение функции контролируется переданными параметрами)

div {
width:230px;
transition:width 4s;
}
div:hover {
width:600px;
}
#el1 {
transition-timing-function:linear;
}
#el2 {
transition-timing-function:ease;
}
#el3 {
transition-timing-function:ease-in;
}
#el4 {
transition-timing-function:ease-out;
}
#el5 {
transition-timing-function:ease-in-out;
}
#el6 {
transition-timing-function:cubic-bezier(0.6,0.2,0.5,0.6);
}

CSS3 свойства переходов