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

-webkit-transition: left 1s cubic-bezier(0,.99,.98,.02) 0s;
-moz-transition: left 1s cubic-bezier(0,.99,.98,.02) 0s;
-o-transition: left 1s cubic-bezier(0,.99,.98,.02) 0s;
transition: left 1s cubic-bezier(0,.99,.98,.02) 0s;
left:0px;
}
.kot-krol:hover .over{
left:325px;
}
Трансформация на CSS (transform)
Анимация на сайтах выглядит круто, даже если это обычное изменение фона или положения объекта. Но намного эффектнее будет применить трансформацию. Для нее в CSS существует свойство transform и несколько значений, которые оно может принять. Ниже рассмотрю все возможные:
Например, используем поворот transform: rotate(<угол>):




.orange img, .kiwi img, .apricot img{
-webkit-transition: all 0.5s linear 0s;
-moz-transition: all 0.5s linear 0s;
-o-transition: all 0.5s linear 0s;
transition: all 0.5s linear 0s;
}
.orange:hover img, .kiwi:hover img, .apricot:hover img{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

Или же смещение transform: translate(x, y):

.translate img{

-webkit-transition:all 1.5s ease-in 0s;
-moz-transition: all 1.5s ease-in 0s;
-o-transition: all 1.5s ease-in 0s;
transition: all 1.5s ease-in 0s;
}
.translate:hover img{
-webkit-transform: translate(300px);
-moz-transform: translate(300px);
-ms-transform: translate(300px);
-o-transform: translate(300px);
transform: translate(300px);
}
Также можно применить масштаб transform: scale(x, y):

.scale img{

-webkit-transition: all 1.5s linear 0s;
-moz-transition: all 1.5s linear 0s;
-o-transition: all 1.5s linear 0s;
transition: all 1.5s linear 0s;
}
.scale:hover img{
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}

И еще наклон transform: skewX[Y](<угол>):

.skew{
-webkit-transition: all 1.5s linear 0s;
-moz-transition: all 1.5s linear 0s;
-o-transition: all 1.5s linear 0s;
transition: all 1.5s linear 0s;
}
.skew:hover{
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-ms-transform: skew(-30deg);
-o-transform: skew(-30deg);
transform: skew(-30deg);
}
@keyframes)'>Более сложные трюки с анимацией на CSS (animation, @keyframes)
Все это помогает быстро и просто сделать интересный дизайн. Казалось бы, чего еще желать? Но я столкнулась с проблемой, с которой не удалось справится лишь CSS-свойствами transform и transition.
Речь идет о следующем: хотелось на некотором сайте сделать один блок постоянно вращающимся. Конечно, первая мысль – написать пару строчек на JavaScript, но до сегодняшнего дня меня успели убедить в том, что такой подход неправильный и даже некрутой! Пришлось искать другие пути.
Итак, я узнала о CSS-свойствах animation и @keyframes. Действительно очень полезная для анимации на CSS штука!
Два вышеупомянуых свойства функционируют вместе. animation задает параметры анимации (продолжительность анимации, временную функцию, задержку, количество итераций). Последнее представляло для меня особый интерес.
@keyframes, в свою очередь, вмещает разные состояния анимируемого элемента, как бы точки отсчета. Первым параметром animation принимает имя @keyframes. Выглядит это, примерно, вот так:

.kot{
-webkit-animation: rotating 30s infinite linear;

-moz-animation: rotating 30s infinite linear;
-ms-animation: rotating 30s infinite linear;
-o-animation: rotating 30s infinite linear;
animation: rotating 30s infinite linear;
}

@-webkit-keyframes rotating {

to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotating {
to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes rotating {
to { -ms-transform: rotate(360deg); }
}
@-o-keyframes rotating {
to { -o-transform: rotate(360deg); }
}
@keyframes rotating {
to { transform: rotate(360deg); }
}
Для моей задачи – постоянно вращающийся блок на CSS – хватило задать только конечное положение элемента (to). Но в @keyframes можно задавать и начальное положение (from), и любые промежуточные в процентах. Это пригодится для создания более сложных анимаций.
Я придумала что-то такое:
BON-BON KILLER
.bon-bon1{
animation: opacity 5s infinite linear 2s;
}
.bon-bon2{
animation: opacity 5s infinite linear 4s;
}
.bon-bon3{
animation: opacity 5s infinite linear 6s;
}
.robot{
animation: translating 8s infinite linear;
}
@keyframes opacity {
from{opacity:1;}
40%{opacity:0;}
50%{opacity:0;}
75%{opacity:0;}
to {opacity:1;}
}
@keyframes translating {
from{bottom:0px;left:0px;}
25%{bottom:290px;left:0px;}
50%{bottom:290px;left:290px;}
75%{bottom:0px;left:290px;}
to {bottom:0px;left:0px;}
}
* Будьте внимательны! В примере кода опущены префиксы для разных браузеров!
В заключение хочу сказать: не забывайте о CSS-анимации в Веб-дизайне! Многие дизайнеры, возможно, и не догадываются о ней, так как работают исключительно в Фотошопе, но это очень зря! Думаю, что сайты с анимационными эффектами всегда выигрышно смотрятся!
Посмотрите сайты с CSS-анимацией, которые мне понравились:

css webОб авторах
Читайте еще интересные статьи про CSS:

Загнутый угол на CSS3

Ягодный коктейль при помощи CSS маски

Рисунки на чистом CSS (single div)

Все про CSS выравнивание