Анімація на CSS 3.

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

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

 

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

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

 

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

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

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

 

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

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

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

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

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

 

<Html>
<Head>
<Title> Animation </ title>
<Meta charset = “utf-8”>
</ Head>
<Body>
<Div class = “block”> </ div>
</ Body>
</ Html>

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

@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;

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

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

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

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

 

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

На цьому все!

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4.50 out of 5)
Loading...

Залишити коментар