svg css анимация бесконечная

Я пытаюсь сделать аналогичный пример, например https://css-tricks.com/svg-line-animation-works, но я бы хотел, чтобы она вращалась бесконечно.

#path1 {
  stroke-dasharray: 170;
  -webkit-animation: animate1 5s infinite; /* Chrome, Safari, Opera */ 
  animation: animate1 5s infinite;
}
@keyframes animate1 {
 to {
       stroke-dashoffset: 1000;
 }
}

@-webkit-keyframes animate1 {
 to {
       stroke-dashoffset: 1000;
  }
}

Я сделал пример http://jsfiddle.net/46cmu71t/. Я помещаю код, чтобы сделать это бесконечным, но он замедляется, а затем начинается снова. Есть ли способ заставить его вращаться без потери скорости?


css svg-animate
person DMande    schedule 15.04.2015    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Сделать это очень просто, добавьте метод linear в строку перехода:

#path1 {
  stroke-dasharray: 170;
  -webkit-animation: animate1 5s infinite linear; /* Chrome, Safari, Opera */ 
  animation: animate1 5s infinite linear;
}

Подробнее о времени перехода CSS
Подробнее о переходах CSS

демонстрация JSFiddle

person Jacob Gray    schedule 15.04.2015
comment
есть ли способ повернуть по часовой стрелке? или я должен изменить путь? - person DMande; 15.04.2015
comment
Нет проблем :D Рад, что смог помочь - person Jacob Gray; 15.04.2015
comment
Здравствуй! я пытаюсь заставить его вращаться быстрее при наведении курсора на внутренний прямоугольник. но мозилла не делает это правильно. есть ли какое-то исправление? хром сделай это хорошо! проверьте, пожалуйста, jsfiddle.net/46cmu71t/4 - person DMande; 16.04.2015
comment
Лучшее, что я могу придумать, это удалить переход для FF:jsfiddle.net/46cmu71t/5 немного подскакивает, но это почти незаметно - person Jacob Gray; 16.04.2015

arrow_upward
1
arrow_downward

Возможно, вы захотите прочитать немного больше об CSS-анимациях. Свойство, которое вы ищете, называется временной функцией. По умолчанию анимация установлена ​​на ease-out, вместо этого вы должны использовать linear. Например.

#path1 {
    stroke-dasharray: 170;
    -webkit-animation: animate1 5s infinite linear; /* Chrome, Safari, Opera */ 
    animation: animate1 5s infinite linear;
}

Обновленная скрипта: http://jsfiddle.net/mfgmxhqm/

person Timothy Miller    schedule 15.04.2015