1. Анімація на CSS3 за допомогою transition
2. Трансформація на CSS3 (transform)
3. Більш складні трюки з анімацією на CSS3 (animation, @keyframes)

Веб-дизайн сьогодні сильно відрізняється від того, яким він був років 5 тому. CSS3 пропонує нам багато нових корисних штучок, без яких сайт виглядає якщо не погано, то вже точно не сучасно. Одним з ключових плюсів вважаю використання різних анімаційних ефектів. Про анімації на CSS3 і піде мова в даній статті.

Анімація на CSS3 за допомогою transition

У своїх проектах я багато разів зверталася до CSS-властивості transition. З його допомогою можна створити примітивні симпатичні анімації. Зазвичай застосовую його для hover-ів, адже часи, коли абсолютно все виділялося підкресленням при наведенні, пройшли ще до того, як я захопилася Веб-дизайном.

Властивість transition відповідально за параметри анімації, такі як: змінне CSS-властивість об'єкта, тривалість анімаційного переходу, функція часу, затримка анімації.

transition: властивість скорость_анімаціі временная_функція затримка

Найбанальніша варіант анімації на CSS3 - перетворення кольору блоку при наведенні. Подивимося як це вийде 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 {-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; }

Трансформація на CSS3 (transform)

Анімація на сайтах виглядає круто, навіть якщо це звичайна зміна фону або положення об'єкта. Але набагато ефектніше буде застосувати трансформацію. Для неї в CSS3 існує властивість 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); }

Більш складні трюки з анімацією на CSS3 (animation, @keyframes)

Все це допомагає швидко і просто зробити цікавий дизайн. Здавалося б, чого ще бажати? Але я зіткнулася з проблемою, з якою не вдалося впоратися лише CSS-властивостями transform і transition.

Йдеться про наступне: хотілося на деякому сайті зробити один блок постійно обертається. Звичайно, перша думка - написати пару рядків на JavaScript, але до сьогоднішнього дня мене встигли переконати в тому, що такий підхід неправильний і навіть некрутий! Довелося шукати інші шляхи.

Отже, я дізналася про CSS-властивості animation і @keyframes. Дійсно дуже корисна для анімації на CSS3 штука!

Два вишеупомянуих властивості функціонують разом. 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); }}

Для мого завдання - постійно обертається блок на CSS3 - вистачило задати тільки кінцеве положення елемента (to). Але в @keyframes можна задавати і початкове положення (from), і будь-які проміжні в процентах. Це стане в нагоді для створення більш складних анімацій.

Я придумала щось таке:

. 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-анімацією, які мені сподобалися: