бесконечная анимация с задержками в SMIL

Добрый день уважаемые, подскажите пожалуйста, как в SMIL реализовать задержки в бесконечно повторяющейся анимации? Приведу пример
#work{ border: 1px solid #000; } #obgect{ animation: moveObject 4s linear infinite; } @keyframes moveObject{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(100px); } }
На первом проходе всё хорошо. - После первой секунды шарик увеличиваеться, на 3-й секунде он приобретает свой изначальный размер, а дальше идет полное рассогласование. Мне необходимо понять как сделать так что б шарик менял свои размеры только с 2 по 3сек в бесконечном цикле. (CSS анимацию не трогаем) Собственно и вопрос - как реализовать повторяющиеся задержки в анимации бесконечного цыкла ?

Ответ

SMIL - это чистая декларативка. Нет переменных, функций и т.д Поэтому некуда запоминать текущее состояние в бесконечном цикле. Но вы хотели получить анимацию на чистом SMIL, поэтому я использовал возможность сделать цепочку последовательных анимаций и последняя анимация переходит к исполнению первой анимации begin="0s;an6.end", а в качестве пауз я поставил заглушки-анимации, которые ничего не делают, но участвуют в цепочке анимаций. Это строки с атрибутом - values="10;10"
Ниже тайминг последовательных анимаций. Зелёный прямоугольник - это горизонтальное перемещение шарика туда и обратно, заданное в стилях CSS
Увеличил немного длину и время пробега шарика для наглядности.

an1, an3, an4, an6 - идентификаторы заглушек- анимаций, которые обеспечивают паузы между анимациями an2 и an5 увеличения и уменьшения размеров шарика.