Эффекты трансформации и анимации в css

ТЕМА:Эффекты трансформации и анимации в CSS
Веб-дизайн сегодня сильно отличается от того, каким он был лет 5 назад. CSS предлагает нам много новых полезных штуковин, без которых сайт выглядит если не плохо, то уж точно не современно. Одним из ключевых плюсов считаю использование различных анимационных эффектов. Об анимации на CSS и пойдет речь в данной статье.
Анимация на CSS с помощью transition
В своих проектах я много раз обращалась к CSS-свойству transition. С его помощью можно создать примитивные симпатичные анимации. Обычно применяю его для hover-ов, ведь времена, когда абсолютно всё выделялось подчеркиванием при наведении, прошли еще до того, как я увлеклась Веб-дизайном.

Свойство transition ответственно за параметры анимации, такие как: изменяемое CSS-свойство объекта, длительность анимационного перехода, функция времени, задержка анимации.
transition: свойство скорость_анимации временная_функция задержка
Самый банальный вариант анимации на CSS - преобразование цвета блока при наведении. Посмотрим как это получится transition и без него:
• Используя transition. (Цвет фона меняется плавно.)
.with_transition{
background:#efefef;
-webkit-transition: background 1s linear 0s;
-moz-transition: background 1s linear 0s;
-o-transition: background 1s linear 0s;
transition: background 1s linear 0s;
}
.with_transition:hover{
background:#F9FF66;
}
• Без transition. (Цвета заменяют друг друга мгновенно.)
.without_transition{
background:#efefef;
}
.without_transition:hover{
background:#91FF66;
}
Свойство transition простое и понятное. Хочу только остановиться на одном из его параметров - временной функции. Эта функция задается с помощью кривой Безье (cubic-bezier), которая принимает 4 значения (x1,y1,x2,y2) - координаты направляющих точек.
Несколько частных случаев этой функции имеют свои названия, например linear. Но если нужен нестандарный эффект, то можете воспользоваться данным генератором. Покажу вариант использования нестандартной временной функции:
Кто там?
.over{