Приостановить и зациклить CSS-анимации с ПОДОЖДИТЕ! оживлять

Вы можете многое сделать с помощью чистой CSS-анимации, но приостановка и зацикливание анимации невозможны с текущей спецификацией W3.

Но с бесплатным инструментом, как ПОДОЖДИТЕ! оживлять вы можете на самом деле создавать петельные анимации с нуля с пользовательские задержки между каждой петлей. Это может показаться обыденной задачей, но это решает проблему для многих разработчиков.

Следует отметить, что существует свойство CSS, называемое анимации задержки который задерживает Начните CSS анимации. Однако это не влияет на повторяющуюся анимацию поскольку это только задерживает отправную точку.

ПОДОЖДИТЕ! оживлять авто-исчисляет сколько пауз необходимо разместить внутри пользовательских ключевых кадров анимации, чтобы создать точную продолжительность паузы вам нужно между петлями. Это может быть сделано вручную, но это очень сложный, не говоря уже о супер раздражает.

Это веб-приложение может работать с любой функцией анимации CSS3, включая вращения и преобразования. Вы не пишете какие-либо новые свойства CSS, а скорее построение поверх функции ключевых кадров создавать паузы в процентах (от 0% до 100%) внутри анимации.

Проверьте домашнюю страницу, чтобы увидеть несколько примеров в действии. Довольно ясно, что вы можете сделать, и исходный код прямо здесь, чтобы скопировать / вставить в вашу собственную работу.

Пожалуйста, обратите внимание, что это не полноценная библиотека. Это генератор, который создает свой код CSS на лету на основе всего, что вам нужно для задержки анимации.

Если вы хотите более простое решение за пределами сайта, тогда вы можете скачать миксин Sass. Это немного сложнее, потому что требуется карта Sass, поэтому вам нужно понять, как добавить пользовательские свойства и правильно написать синтаксис.

Вот пример того, как вы позвонить в миксин:

 @include waitAnimate ((animationName: animName, ключевые кадры: (0: (преобразование: масштаб (1), цвет фона: синий), 50: (преобразование: масштаб (2), цвет фона: зеленый), 100: (преобразование : scale (3), background-color: red)), длительность: 2, waitTime: 1, хронированиеFunction: easy, iterationCount: бесконечное)); 

Профессиональные веб-разработчики не должны испытывать трудностей, изучая веревки и встраивая их в многоразовый миксин Но начинающие разработчики могут изо всех сил пытаться заставить это работать, поэтому веб-приложение.

Все это исходный код доступно бесплатно на GitHub если вы хотите скачать копию локально. Но поскольку это такая странная особенность, это не то, что вам, вероятно, понадобится во многих проектах. Вот почему ЖДИТЕ! Веб-приложение Animate должно быть более чем достаточно, чтобы помочь вам решить разовую проблему из задержка зацикленных анимаций с чистым CSS.

Это действительно забавный хак, который также довольно неясен по дизайну. Но это показывает, насколько это возможно с помощью CSS3 и немного изобретательности..