Анимация вращения svg

#css #css3 #svg

Как сделать анимацию вращения круга svg при ховере?


Т.е. на изображении svg в обычном состоянии. А при наведении курсора нужно, чтобы
цвет крутился по кругу, как змейка. Можно, чтобы не полный круг был
    

Ответы

Ответ 1

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.circle {
  width: 160px;
  height: 160px;
  border-radius: 100%;
  border: #f00 dotted 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -80px 0 0 -80px;
}

.circle:hover {
  animation: spin 2s infinite linear;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}



Ответ 2

Раз уж в вопросе svg:



html, body, svg {
  height: 100%;
  margin: auto;
  display: block;
}

circle {
  fill: none;
  stroke: red;
  stroke-width: 3px;
  stroke-dasharray: 3;
  animation: roll .25s linear infinite;
  animation-play-state: paused;
  pointer-events: visible;
}

circle:hover {
  animation-play-state: running;
}

@keyframes roll {
  from { stroke-dashoffset:  0 }
  to   { stroke-dashoffset: -6 }
}