Плавная анимация объектов только с помощью CSS (5 примеров)

Разместил / Просмотров: 77 238 / комментария 42

Здравствуйте, дорогие читатели блога. В этот день давайте поговорим о, довольно таки, интересной штуке как CSS анимация. То есть, эта анимация элементов делается только с помощью стилей и никакие скрипты тут не используются.

Возможно, когда то CSS анимация заменит всякие скрипты и JQuery плагины, но это будет далеко как не скоро, потому что ещё очень ограниченные возможности, а у JQuery скриптов они безграничны.

Единственный минус в том, что некоторые старые (не обновлённые) браузеры данный способ не поддерживают, а за ИЕ (Internet Explorer) я вообще молчу. Но в общем данная анимация в самых популярных браузерах работает на ура, тем более если используются специальные префиксы.

Кстати о префиксах, мы их будем использовать во всех примерах, так сказать, нужно страховаться:

  • -o- — для браузера Опера;
  • -moz- — для Firefox;
  • -webkit- — для Google Chrome и Safari.

Ну а теперь давайте всё рассмотрим подробнее.

В данном случае мы будем создавать самый обычный блок с разрешением 200 на 100 пикселей, а потом уже прикреплять к нему анимацию.

Обычный блок

HTML

Чтобы добавить такой блок на страницу, нужно просто добавить <div> с соответствующим классом, например:

<div id="box1">Плавное изменение цвета фона </div>

CSS

#box {
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;

border: 1px solid #888;
cursor: pointer;
}

#box:hover {
background-color: #97CE68;
color: #000;
}

Посмотреть пример

Как видите здесь присутствует атрибут :hover, который меняет стиль фона при наведении, в некоторых примерах он должен быть обязательно.

Плавное изменение цвета элемента при наведении с помощью transition

CSS


#box1 {
margin-bottom: 5px;
background-color: #ccc;

padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: background-color 0.8s 0.1s ease;
-o-transition: background-color 0.8s 0.1s ease;
-webkit-transition: background-color 0.8s 0.1s ease;
cursor: pointer;}

#box1:hover {
background-color: #97CE68;
color: #333;
}

Посмотреть пример

Как видите такую анимацию мы добились с помощью атрибута transition. Здесь можно изменить скорость анимации в секундах, в данном случае стоит 0.8с до полного изменения цвета при наведении и 0.1с до того как сработает анимация после наведения и убирания курсора. (Извиняюсь за ребус :-) ) Это значение можно изменять как Вам нужно.

Цвет фона при наведении ставится атрибутом :hover, он здесь обязательный, иначе анимация работать не будет.

Изменение размера элемента

CSS


#box2 {
margin-bottom: 5px;
background-color: #ccc;
color: #333;

padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
cursor: pointer;}

#box2:hover {
background-color: #97CE68;
color: #000;
width: 150px;
height:50px;
}

Посмотреть пример

В этом примере мы добились плавного изменения размера блока при наведении. Стандартная величина 200 на 100, а величина при наведении составляет 150 на 50, которая задаётся атрибутом :hover.

Ещё здесь можно изменить блок только по ширине или по высоте, нужно просто под :hover удалить width: — блок изменяется только по высоте, height: — блок изменяется только по ширине.

Также можно изменить скорость изменения. В данном случае это 1с.

Кручение объекта

CSS


#box3 {
margin-bottom: 5px;
background-color: #ccc;
color: #333;

padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 1s 0.1s ease-in;
-o-transition: all 1s 0.1s ease-in;
-webkit-transition: all 1s 0.1s ease-in;
cursor: pointer;}

#box3:hover {
background-color: #97CE68;
color: #000;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}

Посмотреть пример

Кручение происходит с помощью transform и transition. В данном случае объект крутится по часовой стрелке на 360 градусов со скоростью в одну секунду. Если нужно, чтобы блок крутился против часовой стрелки, в transform значении нужно поставить -(минус). Естественно градус оборота можно изменять.

Плавное увеличение и уменьшение объекта

CSS


#box4 {
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
-webkit-transition: all 3s ease-out;
cursor: pointer;}

#box4:hover {
background-color: #97CE68;
color: #000;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
}

Посмотреть пример

В этом примере блок плавно увеличивается в 2 раза. Это значение выставляется transform: scale(2). Если поставить значение 1.5, соответственно увеличение блока будет в 1.5 раза.

Этим же способом можно уменьшить размер блока, например поставить значение 0.5.

Плавное смещение блока вниз

CSS

#box5 {
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
cursor: pointer;}

#box5:hover {
background-color: #97CE68;
color: #000;
-webkit-transform: translate(0,50px);
-moz-transform: translate(0,50px);
-o-transform: translate(0,50px);
}

Посмотреть пример

Здесь перемещение задаётся в пикселах. В данном случае (0,50px). Так же можно заставить блок подниматься вверх этим значением 0,-50px. Или по диагонали вниз 50px,50px. Одним словом блок можно заставить смещаться куда угодно.

Вот в принципе и всё, что хотелось сказать. Нет, не всё :-) Забыл напомнить о том, что эту CSS анимацию можно применять к любым объектам на сайте: к картинкам, тексту, заголовкам, иконкам и т.д. Вот для ссылок отлично подойдет плавное изменение цвета, по моему очень красиво. :-)

И ещё, этой информацией поделился с нами сайт shpargalkablog.ru. За что ему огромное спасибо.

Вот теперь точно все :-) До скорых встреч, друзья.