Плавна анімація об’єктів тільки за допомогою css (5 прикладів)
Привіт, дорогі Новомосковсктелі блогу. У цей день давайте поговоримо про, досить таки, цікавою штуці як CSS анімація. Тобто, ця анімація елементів робиться тільки за допомогою стилів і ніякі скрипти тут не використовуються.
Можливо, коли то CSS анімація замінить всякі скрипти і JQuery плагіни. але це буде далеко як не скоро, тому що ще дуже обмежені можливості, а у JQuery скриптів вони безмежні.
Єдиний мінус у тому, що деякі старі (Не оновлена) браузери даний спосіб не підтримують, а за ИЕ (Internet Explorer) я взагалі мовчу. Але в загальному дана анімація в найпопулярніших браузерах працює на ура, тим більше якщо використовуються спеціальні префікси.
До речі про префіксах, ми їх будемо використовувати у всіх прикладах, так би мовити, потрібно страхуватися:
- -o- - для браузера Опера;
- -moz- - для Firefox;
- -webkit- - для Google Chrome і Safari.
Ну а тепер давайте все розглянемо докладніше.
В даному випадку ми будемо створювати самий звичайний блок з дозволом 200 на 100 пікселів, а потім вже прикріплювати до нього анімацію.
звичайний блок
Щоб додати такий блок на сторінку, потрібно просто додати
#box margin-bottom: 5px;
background-color: #ccc;
color: # 333;
padding: 10px;
text-align: center;
width: 200px;
height: 100px;
border: 1px solid # 888;
cursor: pointer;
>
#box: hover background-color: # 97CE68;
color: # 000;
>
Як бачите тут присутній атрибут: hover. який змінює стиль фону при наведенні, в деяких прикладах він повинен бути обов'язково.
Плавна зміна кольору елемента при наведенні за допомогою transition
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;>
Як бачите таку анімацію ми домоглися за допомогою атрибута transition. Тут можна змінити швидкість анімації в секундах, в даному випадку варто 0.8с до повної зміни кольору при наведенні і 0.1с до того як спрацює анімація після наведення і прибирання курсору. (Перепрошую за ребус :-)) Це значення можна змінювати як Вам потрібно.
Колір фону при наведенні ставиться атрибутом: hover. він тут обов'язковий, інакше анімація працювати не буде.
Зміна розміру елемента
text-indent: 0px;
border: 1px solid # 888;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
cursor: pointer;>
У цьому прикладі ми домоглися плавної зміни розміру блоку при наведенні. Стандартна величина 200 на 100, а величина при наведенні становить 150 на 50, яка задається атрибутом: hover.
Ще тут можна змінити блок тільки по ширині або по висоті, потрібно просто під: hover видалити width: - блок змінюється тільки по висоті, height: - блок змінюється тільки по ширині.
Також можна змінити швидкість зміни. В даному випадку це 1с.
кручення об'єкта
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 значенні потрібно поставити - (мінус). Природно градус обороту можна змінювати.
Плавне збільшення і зменшення об'єкта
# 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;>
У цьому прикладі блок плавно збільшується в 2 рази. Це значення виставляється transform: scale (2). Якщо поставити значення 1.5, відповідно збільшення блоку буде в 1.5 рази.
Цим же способом можна зменшити розмір блоку, наприклад поставити значення 0.5.
Плавне зміщення блоку вниз
# 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. За що йому величезне спасибі.
Ось тепер точно все :-) До швидких зустрічей, друзі.
Неї, не по вартовий, фон прокручується. В іконах використовую спрайт. При зміні background-position і використанні transition ease - йде прокрутка фону при наведенні. Мені потрібно, щоб при зміні background-position - прокрутки до нового значення позиції фону не відбувалося, а було плавне перетікання квітів скажімо іконки №1 -> в іконку №1: hover.
Я в футере реалізував таку річ через transition opacity. Але, там довелося пожертвувати прозорістю в 50%. І ефект вийшов.
З іконками в меню спочатку прозорість міняти не можна. Ось і думаю - що б зробити. Можна звичайно без анімації - але це не дуже якось. А для кожного backgroun-position прописувати прозорість - це 24 правила. Просто ужс-же)
Так просто зробіть щоб іконка змінювалася на іншу як зазвичай це робиться через CSS, і додайте до класу з початковою іконкою transition:
Спрайт прибрати і 12 окремих іконок зробити? (0_0) I | I
Тоді не використовуйте transition. а спробуйте використовувати скрипт, який це буде робити, правда зі скриптами я нічим допомогти не можу.
І так, спасибі за оперативну відповідь! Це реально круто! ))
У box2: hover задайте фіксовану висоту в пікселях, а не авто
Трохи не те. Сенс був якраз в тому, що б не задавати фіксовану висоту у: hover висота була в залежності від контенту. Мабуть, це просто не можна реалізувати використовуючи тільки css. Думаю, просто скористаюся іншим рішенням.
Дякуємо.
Швидше за все тільки на CSS цього не зробити. Радий був допомогти, хоч і не допоміг. )
«Плавне збільшення і зменшення об'єкта»
Варто зауважити, що можливо задавати не тільки цілі значення, а так само, для більш тонкої настройки, соті значення.
наприклад:
-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);