Привет всем, помогите запустить аниматион навсегда. :)
Мой код: http://codepen.io/DavidKern/pen/EavaYx
Спасибо. :)
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПривет всем, помогите запустить аниматион навсегда. :)
Мой код: http://codepen.io/DavidKern/pen/EavaYx
Спасибо. :)
Пример нужно немного подкорректировать.
В css, кроме infinite
, нужно написать правильный keyframes
, который зацикливает анимацию так, чтобы визуально было не видно, что запустился следующий цикл анимации:
.clace {
stroke-dasharray: 2000;
-webkit-animation: ane 9s linear infinite;
-o-animation: ane 9s linear infinite;
-moz-animation: ane 9s linear infinite;
animation: ane 9s linear infinite; // Соответственно скорость анимации можно настроить изменяя количество секунд
}
@-webkit-keyframes ane {
from {
stroke-dashoffset: 2000;
}
to {
stroke-dashoffset: -2000;
}
}
@keyframes ane { // Не забываем про браузеры кроме webkit
from {
stroke-dashoffset: 2000;
}
to {
stroke-dashoffset: -2000;
}
}
Вынести стили фона из css в svg, думаю, так будет правильнее.
<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)" fill="#ffffff" stroke="#000000" stroke-width="5"></g>