Анимирование стилей.
Например, плавный переход цвета или размера окна, достаточно указать у родного элемента, чтобы все дочерние имели его, но это не точно, проверить надо.
Для примера:
HTML:
Код:
<html>
<head><style type="text/css" src="/style.css"></head>
<body>
<div class=".block">ТЕКСТ</div>
</body>
</html>
CSS (style.css):
Код:
.block
{
text-align: center;
width: 300px;
height: 300px;
line-height: 300px;
opacity: .3;
background-color: #444;
transition-property: all;
transition-duration: .5s;
}
.block:hover
{
width: 600px;
line-height: 600px;
opacity: 0.8;
background-color: #DDD;
}
При наведении блок станет менее прозрачным, увеличится в ширине и поменяет цвет бекграунда.
Указал all, чтобы он работал с любыми свойствами.
UPD: Для примера ещё текст по центру, так же должен быть всё время по центру, хоть ты приближаешь, хоть отдаляешь, за счёт того, что мы размер строки по вертикали сделали равным высоте блока, и ширина выравнивается посредством центрирования текста, что логично.
UPD2: Проебался, длительность забыл указать.
transition-duration: <время>
Время указывается в секундах.
О типах анимации и шагах рассказывать не буду, ибо это долго
