» » » Анімація css3. Довідник

Анімація css3. Довідник

Анімація css3. Довідник
 
Анімація css3. Довідник
 

Надоїло мені шукати необхідні частини коду для анімації css - ось і вирішив зібрати все на 1 сторінці.

Перед вами найкращий FAQ пояснення до анімації.

«Правильна анімація»  повинна бути плавною, приємною і зовсім не помітною? погодьтеся, досить неприємно, коли анімація на сайті, підвисає, підстрибує чи пригальмовує.

CSS3-анімація може застосовуватися практично для всіх елементів html, а також для псевдоелемент :before :after. Список анимируемых властивостей наведено на цій сторінці. При створенні анімації не варто забувати про можливі проблеми з продуктивністю, так як на зміну деяких властивостей потрібно багато ресурсів.

Які властивості можна безпечно використовувати при анімації?

Для хорошої плавної анімації можна використовувати ті властивості, які викликають тільки компонування, виключаючи перерахунок макета і промальовування. Таких властивостей CSS поки що небагато: opacity і transform, але з їх допомогою можна зробити багато чого.

  • Позиціонування — transform: translate(x,y) translateX(n) translateY(n)
  • Масштабування — transform: scale(x,y) scaleX(n) scaleY(n)
  • Обертання — transform: rotate(ndeg)
  • Деформування — transform: kew(x-ndeg,y-ndeg) skewX(ndeg) skewY(ndeg)
  • Матриця — transform: matrix(a, c, b, d, x, y)
  • Прозорість — opacity: 0...1

Як приєднати анімацію до блока?

css анімація приєднується до стилю, наприклад:

.rm-rul-bl5 {animation-name: anim-02;}

anim-02 це назва анімації, яка також вказується в ключивих кадрах, що відповідають за її роботу. 0% - це початок, 100% - це кінець анімації. В ключових кадрах ми задаємо звичайні властивості для стилів. На кожен єтап анімації свої стилі.

@keyframes anim-02 {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}

Елементи css анімації:

animation-name: move — назва анімації.
animation-duration: .2s — тривалість анімації (Значення в секундах .2s або в мілісекундах 20ms).
animation-timing-function: linear — зміна швидкості анімації. Значення:
cubic-bezier(x1, y1, x2, y2) — Крива Безьє. Значення змінних від 0 до 1.
ease — Використовується за замовчуванням. Починається повільно, швидко прискорюється, сповільнюється в кінці. Аналог: cubic-bezier(0.25,0.1,0.25,1)
linear — Рівномірна швидкість. Аналог: cubic-bezier(0,0,1,1)
ease-in — Починається повільно, плавно прискорюється наприкінці. Аналог: cubic-bezier(0.42,0,1,1)
ease-out — Починається швидко, плавно сповільнюється в кінці. Аналог: cubic-bezier(0,0,0.58,1
ease-in-out — Починається повільно і повільно закінчується. Аналог: cubic-bezier(0.42,0,0.58,1)
steps(кількість кроків,start|end) — Тимчасова функція. Дозволяє розбити анімацію на чітке кількість кроків. Перший аргумент steps — кількість кроків. start – означає, що при початку анімації потрібно відразу застосувати перша зміна. Альтернативне значення end означає, що зміни потрібно застосовувати не на початку, а в кінці кожної секунди
step-start — Задає покрокову анімацію, розбиваючи її на відрізки, зміни відбуваються на початку кожного кроку. Аналог steps(1, start)
step-end — Покрокова анімація, зміни відбуваються в кінці кожного кроку. Аналог: steps(1, end)
animation-delay: 2s — Затримка анімації. (Значення в секундах 2s або в мілісекундах 200ms).
animation-iteration-count: 3 — Повтор анімації. З допомогою цілого числа задається кількість повторів анімації. Значення за замовчуванням 1. Дробові значення більше 1 будуть відтворювати анімацію, обрізаючи її на частини наступній ітерації. Значення infinite — анімація буде програватися нескінченно.
animation-direction: revers — Напрям анімації. Властивість задає напрямок повтору анімації. Якщо анімація не повторюється, то це властивість не має сенсу. Значення:
normal — За замовчуванням. Звичайний режим.
alternate — Анімація відтворюється з початку до кінця, потім у зворотному напрямку
alternate-reverse — Анімація відтворюється з кінця до початку, потім у зворотному напрямку
reverse — Анімація відтворюється з кінця
animation-play-state: paused — Запуск і зупинка анімації. Приклад: .element:hover {animation-play-state: paused;}. Значення:
running — За замовчуванням. Запуск анімації.
paused — Зупинка анімації.
animation-fill-mode: forwards — Стан елемента до і після відтворення анімації. Значення:
None — За замовчуванням. Стан елемента не змінюється
forwards — Елемент залишається в кінцевому стані.
backwards — Повертає стан елемента після завантаження сторінки до першого кадру, навіть якщо встановлена затримка animation-delay, та лишає його там, доки не почнеться анімація.
both — Дозволяє залишати елемент в першому ключовому кадрі до початку анімації (ігноруючи позитивне значення затримки) і затримувати на останньому кадрі до кінця останньої анімації.

Коротка запис анімації

animation-name:abl5; animation-duration:14s; animation-iteration-count: infinite; animation-direction: normal; animation-delay: 0s;animation-fill-mode:both;

/* Все це можна записати скорочено, але скорочений запис іноді при великих анімаціях не працює */

animation: abl5 14s infinite normal 0s both;

Для відтворення анімації, обов'язково потрібно вказати властивості: animation-name та animation-duration, інші властивості приймуть значення за замовчуванням. Порядок властивостей не має значення, однак animation-duration повинно стояти перед animation-delay.

Множинні анімації

Для одного елемента можна поставити відразу декілька анімацій через кому:

animation: first-antimation 1s ease-in-out 0.5 s alternate, second-animation 1s linear .3s;


---

Зраки анмації css рухув різні сторони: Дивитись

Приклади анімації картинки: дивитись

 
 
 

  359   0
 
Додати
свій
коментар
оновити, якщо не видно коду
 
В роботі:
ПроектПрогресСтатус
Розробка сайту салону манікюра 99%В процесі
Редизайн цього сайту 97%В процесі
Редизайн "Westplast" 100%21.02.18
Просування "Нова Ванна" 100%18.03.18
Darya 1.0 89%09.01.18