Призупинити & цикл анімації CSS з WAIT! Анімація
З чистим анімацією CSS можна багато чого зробити, але призупинити & цикл анімації неможливий з поточною специфікацією W3.
Але з безкоштовним інструментом, як ЗАЧЕКАЙТЕ! Анімація Ви можете насправді створювати анімації з нуля с спеціальні затримки між кожним циклом. Це може здатися повсякденним завданням, але вирішує біль для багатьох розробників.
Слід зазначити, що називається CSS-властивість затримка анімації котрий затримки початок анімації CSS. Однак це не впливає на повторювану анімацію оскільки вона лише затримує відправну точку.
ЗАЧЕКАЙТЕ! Анімація автоматичне обчислення скільки пауз потрібно розмістити в кастомних кадрах анімації створити точну тривалість паузи потрібно між циклами. Це може бути зроблено вручну, але це надзвичайно згорнуте, не кажучи вже про супер дратівливих.
Цей веб-додаток може працювати з будь-якою функцією анімації CSS3, включаючи повороти і перетворення. Ви не пишете жодних нових властивостей CSS на верхній частині функції ключових кадрів Створювати паузи на основі відсотків (від 0% до 100%) всередині анімації.
Перегляньте домашню сторінку кілька прикладів у дії. Це досить ясно, що ви можете зробити, і вихідний код тут, щоб скопіювати / вставити у вашу власну роботу.
Зверніть увагу, що це не повноцінна бібліотека. Це генератор створює ваш CSS-код на льоту на основі всього, що потрібно для затримки анімації.
Якщо ви хочете простіше рішення поза місцем, то ви можете завантажити Sass mixin. Це трохи складніше, тому що це вимагає карти Sass, так що вам потрібно зрозуміти, як додати власні властивості і правильно написати свій синтаксис.
Ось приклад того, як ви зателефонуйте до mixin:
@include waitAnimate ((animationName: animName, ключові кадри: (0: (трансформувати: масштаб (1), колір фону: синій), 50: (трансформувати: масштаб (2), колір тла: зелений), 100: (перетворити : шкала (3), фон-колір: червоний)), тривалість: 2, час очікування: 1, синхронізаціяфункція: легкість, ітераціяCount: infinite));
Про веб-розробники не повинні мати жодних проблем з вивченням мотузок і створенням їх у багаторазовому змішувачі. Але новачки-розробники можуть боротися за те, щоб він працював, отже, веб-додаток.
Все це вихідний код безкоштовно на GitHub якщо потрібно завантажити локально копію. Але оскільки це така дивна особливість, це не те, що ви, ймовірно, потребуватимете в багатьох проектах. Ось чому WAIT! Анімація веб-програми повинна бути більш ніж достатньою, щоб допомогти вам вирішити одноразову проблему з затримка циклічної анімації з чистим CSS.
Це дійсно веселий хак, який також досить незрозумілий за дизайном. Але це показує, наскільки можливо з CSS3 і трохи винахідливості.
