Розробка, підтримка, SEO, просування, соцмережі та реклама сайтів ☣
Кабінет клієнта
Зареєструватись Забули пароль?

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

Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 12-01-2018, 22:45 1 695 0
Анімація 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 рухув різні сторони: Дивитись

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

 
 

Розробка сайтів | Створення сайтів

Коментарі

⤹ Залишити свій коментар ⤸

  • Натисніть на зображення, щоб оновити код, якщо він нерозбірливий
Останнє на сайті
  • seo

    Українські каталоги для реєстрації сайту

    coments/12 vievs/ 1
  • faq

    Які існують російські домени?

    coments/14 vievs/ 0
  • seo

    Українська двигун для сайту - Ardilla-CMS

    coments/103 vievs/ 0
Останнє в магазині
Картинка в meta з додаткового поля Картинка в meta з додаткового поля / Платні модулі DLE
Коментарі
Популярне на сайті

Для усіх любителів Анекдотів українською існує чудовий сайт з безліччю приколів, смішних історій та відео: Анекдоти

Тарифні плани

Потужний старт Стандартний запуск сайту від $400
  • - ♜ -
  • В стартовий тарифний план входить:

  • Розробка та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 5 сторінок
  • Ліцензія двигунчика DLE
Просунутий SEO оптимізований сайт від $700
  • - ♚ -
  • В SEO тарифний план входить:

  • Створення та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 10 сторінок
  • Ліцензія двигунчика DLE
  • 5 силок + перелінковка
Імперський винущувач конкурентів від $999
  • - ♛ -
  • В імперський тарифний план входить:

  • Розробка сайту
  • Наповнення до SEO 20 сторінок
  • Повна оптимізація
  • Ліцензія двигунчика DLE
  • МОЄ НАТХНЕННЯ та ДОСВІД!
/* soc-knopki */