Анімація на css3.

Щоб зробити анімацію якогось елементу на сторінці, раніше ми мали використовувати JQuery. але CSS3 і тут нам полегшив завдання, тому що тепер ми можемо обійтися без скриптів. Ось в цій статті давайте й поговоримо про те, як анімувати елемент на сторінці за допомогою CSS3.

Анімації задаються по ключовим кадрам. Давайте їх і створимо.

@keyframes spin { 
0%{ 
туткод 
} 
100%{ 
туткод 
} 
}

Ми можемо написати так:

Відео: Keyframes CSS3 - анімація на практиці

@keyframes spin { 
from{ 
туткод 
} 
 to { 
туткод 
} 
}

Це абсолютно те ж саме.

щоб створити ключові кадри, ми повинні написати @keyframes, а потім вказати яке-небудь ім`я. У фігурних дужках ми вказуємо властивості, які хочемо анімувати на певній стадії анімації. Звичайно, значення можуть бути не обов`язково 0% або 100%. Ми також можемо поставити і проміжні значення.

@keyframes spin { 
0%{ 
туткод 
} 
25%{ 
туткод 
} 
100%{ 
туткод 
} 
}

Якщо в різний проміжок часу у нас повинно відбуватися одне і те ж, ми можемо написати ці проміжки через кому:

Відео: CSS Анімація - стрибучий м`яч | урок по CSS і CSS3, анімація

@keyframes spin { 
0%{ 
туткод 
} 
25%,50%{ 
туткод,Котрийбудевиконуватисявпроміжках25%і50% 
} 
100%{ 
туткод 
} 
}

Давайте далі дивитися вже на прикладі.

Створимо HTML розмітку

 
 
Animation 
charset="Utf-8"gt; 
 
 
class="Block"gt;

Тепер напишемо стилі

@keyframes spin { 
0%{ 
 transform: rotate(0deg) - 
} 
100%{ 
 transform: rotate(360deg) - 
} 
} 
 
.block { 
 animation-name: spin- 
 animation-duration:2s- 
 animation-timing-function: linear- 
 animation-delay:1s- 
}

Якщо ви запустите цей приклад, то побачите блок, який зробить повний оборот за годинниковою стрілкою і зупиниться. Тепер поговоримо про те, що кожне властивість означає.

В animation-name ми вказуємо ім`я нашої анімації, то саме, що ми вказали після ключового слова @keyframes.

В animation-duration ми вказуємо тривалість нашого анімації. У нашому випадку 2 секунди.

Про властивості animation-timing-function і animation-delay ми говорили в статті про плавні переходи, тому повторюватися не будемо.

Щоб наш блок повернувся 2 рази, потрібно вказати властивість animation-iteration-count

animation-iteration-count:2-

Якщо вам потрібно, щоб анімація працювала вічно, вкажіть значення infinite

animation-iteration-count: infinite-

Для того, щоб наша анімація відбувалася в зворотному напрямку, потрібно вказати

animation-direction: reversed-

А якщо ми хочемо, щоб наша анімація першу ітерацію робила нормально, а другу в зворотному напрямку, потрібно вказати:

Відео: CSS уроки. Анімація в CSS3. Частина 1

animation-direction: alternate-

Зробимо, щоб при наведенні на наш блок, анімація зупинялася. За це відповідає властивість animation-play-state зі значенням paused.

.block:hover { 
 animation-play-state: paused- 
}

В кінці приведу коротку запис

Відео: CSS3 Анімація Супермена ► Лазер з очей!

.block { 
 animation: spin 2s linear 1s infinite alternate- 
}

На цьому все! Як бачите, анімація - річ класна, а використовуючи її з усім тим, що ми вивчили в минулих статтях, можна досягти приголомшливих результатів! Так що, удачі у експерименту -)

Поділися в соціальних мережах:

Схожі