Как задать очередность анимации элемента?

Question

[Роман]

Други подскажите как настроить очередность выполнения анимации. Т.е., есть буква, она сначала обводиться (анимация 1), а после должна заливаться цветом (анимация 2), так вот, обводку сделал, а как добавить заливку теперь к этом у же элементу? Все это дело в svg файле.

<style>
                .stroke {
                    stroke-dasharray: 600;
                    stroke-dashoffset: 100;
                    animation: dash 15s linear alternate;
                    animation: dash 15s infinite;
                    animation-delay: 1s;
  
                    }
                
                @-webkit-keyframes dash {
                
                  0% {stroke-dashoffset: 0;}
                 50% {stroke-dashoffset:600;}
                100% {stroke-dashoffset: 0;}
                
            </style>

Answer 1

[Givandos]

50% и 100% поменять на 25% и 50% соответственно, а также добавить ещё строки с процентным уровнем и вашими стилями.

Что-то типа такого:
0% {stroke-dashoffset: 0;}
25% {stroke-dashoffset:600;}
50% {stroke-dashoffset: 0; color: #fff;}
100% {color: #000;}

Comments

[Роман]

Большое спасибо! Это же примерно в голове крутилось, не смог точно расставить все по местам!