0

Привет всем, помогите запустить аниматион навсегда. :)

Мой код: http://codepen.io/DavidKern/pen/EavaYx

Спасибо. :)

2 ответа 2

2

Пример нужно немного подкорректировать.

В 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>

Поправленный пример

1

В стилях прописываем:

animation-iteration-count:infinite;

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.