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

Разместил / Просмотров: 26 240 / комментария 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. За что ему огромное спасибо.

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

  • Марат

    Отлично) Буду экспериментировать, эффектно выглядит :).

  • Это точно, а главное без скриптов :-)

  • В самом первом примере опечатка.

    box != blok

    CSS

    #box {
    … }

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

  • KMiNT21, спасибо огромное, исправил :-)

  • Arti

    Блин, руку бы автору пожал:))
    Очень полезная статья) теперь и всякие js не нужны:)))
    Спасибо!!! :)

  • Arti, спасибо Вам огромное. Рад, что Вам пригодилось, и спасибо огромное :-)

  • Отличный урок! Спасибо!

  • Александр

    Спасибо автору. Перелопатил много бредо-статей на эту тему, толку — 0,0. Кое-что сам пробовал, но знаний мало, поэтому еще раз спасибо.

  • Александр, я очень рад, что моя статья Вам помогла. Спасибо Вам. :-)

  • В IE 10 все переходы работают, надо добавить примерно это:
    -ms-transition:all 300ms ease;
    и -ms-transform: translate(3px,0);
    В IE9 неn плавности(

  • Sergii, мне кажется, что за ие вообще уже нужно забывать, даже гугл его уже не поддерживает.

  • Sergii

    Пользователи зато не забывают((( Их пока 14%

    Google Chrome 30,31%
    Opera 25,21%
    Mozilla Firefox 19,83%
    Microsoft Internet Explorer 13,88%
    Браузеры мобильных устройств 9,35%

  • Sergii, не спорю, многие ещё пользуются. Ну не хочет данная CSS анимация работать на ие, и не знаю, что с этим делать. Есть выход, или не использовать её вообще на сайте, или использовать флеш. :-)

  • А можно скрипт использовать, например как на сайте http://videodiscovery.org/ вверху

    Будет так:

    стиль:

    ul.top_menu li a {
    position: relative;
    top: 0;
    }

    Скрипт:

    $(document).ready(function(){

    $(‘.top_menu_li’).hover(function(){
    $(«.top_menu_a», this).stop().animate({top:’6px’},{queue:false,duration:260});
    }, function() {
    $(«.top_menu_a», this).stop().animate({top:’0′},{queue:false,duration:560});
    });
    });

    Меню:

    Главная

  • А где анимация? Бегунок который сверху?

  • Sergii

    Да, недоделали, хотя для Lava :Lamp работает анимация в IE http://www.nixbox.com/projects/jquery-lavalamp/demos/original.html

  • Владислав

    Спасибо,долго маялся как это сделать.
    Всё получилось благодаря вам :)

  • А как сделать что бы побыстрее блоки двигались?

  • Владислав, в transition: измените значение секунд, в Вашем случае нужно уменьшить значение чтобы блоки двигались быстрее.

  • Дмитрий

    Автор, спасибо за статью! Новичкам типа меня (а нас гораздо больше, чем проф.) -такая статья — клондайк! Вот это и нужно! Просто, доступно, понятно, без всяких, здравстуйте, меня зовут Евгений Попов, в этом видеоуроке я расскажу Вам как познакомились баба Люба и волшебник Java Script

  • Дмитрий

    Автор, большое спасибо за статью! Новичкам типа меня (а нас гораздо больше, чем проф.) -такая статья — клондайк! Вот это и нужно! Просто, доступно, понятно, без всяких, здравстуйте, меня зовут Евгений Попов, в этом видеоуроке я расскажу Вам как познакомились баба Люба и волшебник Java Script

  • Дмитрий, спасибо Вам, очень рад, что помог :)

  • Дмитрий, спасибо, очень рад, что помог Вам :)

  • Evgeny

    Скажите, а как можно сделать эффект плавной смены background-position с помощью анимации, transition или keyframes? То есть такая проблема. При использовании:

    #i1:hover { background-position: 0px -320px;}
    #i2:hover { background-position: -96px -320px;}
    #i3:hover { background-position: -192px -320px;}
    #i4:hover { background-position: -288px -320px;}
    #i5:hover { background-position: -384px -320px;}
    #i6:hover { background-position: -480px -320px;}
    #i7:hover { background-position: 0px -400px;}
    #i8:hover { background-position: -96px -400px;}
    #i9:hover { background-position: -192px -400px;}
    #i10:hover { background-position: -288px -400px;}
    #i11:hover { background-position: -384px -400px;}
    #i12:hover { background-position: -480px -400px;}

    и

    .icomenu ul li a:hover {

    -webkit-transition: background-position 0.5s ease;
    -moz-transition: background-position 0.5s ease;
    transition: background-position 0.5s ease;

    }

    У меня смена фона прокручивается при наведении.

    Мне нужно чтобы только они сменяли друг друга прозрачностью, без полного исчезновения opacity. Подскажите как можно такое реализовать.

    Если использовать keyframes — там мигание происходит. (

    Замучился.

  • А можно на примере всё взглянуть?

  • Evgeny

    Саш, вот ссылка — иконочки там ) http://advokat-neva.ru/
    Можете подсказать как сделать?

    Крутятся, собаки )) А не нужно чтоб крутились )

  • Крутятся по часовой? У меня ничего не крутится.

  • Evgeny

    Нее, не по часовой, фон прокручивается. В иконках использую спрайт. При смене background-position и использовании transition ease — идет прокрутка фона при наведении. Мне нужно, чтобы при смене background-position — прокрутки до нового значения позиции фона не происходило, а было плавное перетекание цветов скажем иконки №1 —> в иконку №1:hover.

    Я в футере реализовал такую вещь через transition opacity. Но, там пришлось пожертвовать прозрачностью в 50%. И эффект получился.

    С иконками в меню изначально прозрачность менять нельзя. Вот и думаю — что бы сделать. Можно конечно без анимации — но это не очень как-то. А для каждого backgroun-position прописывать прозрачность — это 24 правила. Просто ужс-же )

  • Так просто сделайте чтобы иконка сменялась на другую как обычно это делается через CSS, и добавьте к классу с первоначальной иконкой transition:

  • Evgeny

    Спрайт убрать и 12 отдельных иконок сделать? (0_0) I|I

  • Тогда не используйте transition:, а попробуйте использовать скрипт, который это будет делать, правда со скриптами я ничем помочь не могу.

  • Evgeny

    Ну, что ж ) Спасибо и на том. Я сейчас нашел статью про эту вещь, более менее попробую реализовать, может пригодится http://saitobaza.ru/plavnaya-smena-fonovogo-izobrazheniya-iil-cveta.htm

  • Evgeny

    И да, спасибо за оперативный ответ! Это реально круто! ))

  • Рад был помочь :)

  • Денис Акулов

    Добрый день.
    У меня вопрос по поводу третьего пункта — «Изменение размера элемента». Возможно ли сделать анимацию под блок с плавающим размером? Т.е. минимальный размер у меня указан и зафиксирован а при включении свойства идёт увеличение размера в зависимости от содержимого. Я пробовал сделать (http://jsfiddle.net/Denis_Akulov/Ly57xok0/2/), но изменение происходит резко. Возможно ли это.
    Я знаю, что конечную задачу с появлением текстом можно решить другими способами, не имеющими ни малейшего отношения к этому, но меня интересует возможность реализации именно таким способом.
    Спасибо.

  • Здравствуйте, ссылка не рабочая. Если увеличение резко происходит, возможно, где то допустили ошибку.

  • Денис Акулов

    Добрый вечер.
    В принципе из возможных ошибок я для себя отметил только отсутствие чётких размеров у расширенного варианта блока и добавленное свойство overflow: hidden, которое требовалось для сокрытия текста в неактивном состоянии.
    Поправил ссылку — http://jsfiddle.net/Denis_Akulov/Ly57xok0/2/

  • В box2:hover задайте фиксированную высоту в пикселях, а не авто

  • Денис Акулов

    Немного не то. Смысл был как раз в том, что бы не задавать фиксированную высоту у :hover высота была в зависимости от контента. Видимо, это просто нельзя реализовать используя только css. Думаю, просто воспользуюсь другим решением.
    Спасибо.

  • Скорее всего только на CSS этого не сделать. Рад был помочь, хоть и не помог. :)

  • Jooker

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

    Стоит заметить, что возможно задавать не только целые значения, а так же, для более тонкой настройки, сотые значения.
    Например:

    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);

    Если значения в элементах css задавать меньше нуля, то будет обратный эффект.
    Пример:

    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);

  • Спасибо! :)