Пауза & Loop 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, timingFunction: лекота, iterationCount: infinite)); 

Про разработчиците на уеб сайтове не би трябвало да имат проблем с изучаването на въжетата и изграждането им в миксин за многократна употреба. Но начинаещите разработчици могат да се борят, за да го заработят, а оттам и уеб приложението.

Всичко това програмен код е на разположение безплатно в GitHub ако искате да изтеглите копие локално. Но тъй като това е толкова странна функция, това не е нещо, което вероятно ще ви е нужно в много проекти. Ето защо WAIT! Анимирайте уеб приложението трябва да бъде повече от достатъчно, за да ви помогне решаване на еднократен проблем на забавяне на анимации с чист CSS.

Това е наистина забавен хак, който също е доста неясен по дизайн. Но ще покаже колко е възможно с CSS3 и малко изобретателност.