CODEWITHSUNDEEP
csssvgcss-animations
Yiezy
Yiezy

Reputation: 23

Why is my @keyframes animation not working with the SVG `stroke-dashoffset` property?

My CSS animation is not working when I try to apply it to my <svg> element.

I have tried to use a prefix but it still did not fix the problem.

@keyframes mymove {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 56.52;
  }
}

@-webkit-keyframes mymove {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 56.52;
  }
}

.circle {
  position: absolute;
  top: 0;
  left: 0;
  animation-duration: 1.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: mymove;
  -webkit-animation-name: mymove;
}
<nav class="footage-nav">
  <a class="link" href="my_work/index.html"><svg height="20" width="20"><circle class="circle" cx="50%" cy="50%" r="9" stroke="#231f20" stroke-width="1" fill-opacity="0" /></svg>Work<div class="underLine"></div></a>
  <a href=""><svg height="20" width="20"><circle class="circle" cx="50%" cy="50%" r="9" stroke="#231f20" stroke-width="1" fill-opacity="0" /></svg>About<div class="underLine"></div></a>
</nav>

Upvotes: 0

Views: 318

Answers (1)

Alexandr_TT
Alexandr_TT

Reputation: 14545

As commented by user4642212

The animation is definitely active (as you can see in dev tools), but it has no effect. What are you expecting it to do? stroke-dashoffset modifies where a stroke-dasharray starts. You’ve never set one.

In other words, for the animation to work, you need to add the stroke-dasharray to the animated object.: stroke-dasharray:56.52;

@keyframes mymove {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 56.52;
  }
}

@-webkit-keyframes mymove {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 56.52;
  }
}

.circle {
  stroke-dasharray:56.52;
  position: absolute;
  top: 0;
  left: 0;
  animation-duration: 1.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: mymove;
  -webkit-animation-name: mymove;
}
<nav class="footage-nav">
  <a class="link" href="my_work/index.html"><svg height="20" width="20"><circle class="circle" cx="50%" cy="50%" r="9" stroke="#231f20" stroke-width="1" fill-opacity="0" /></svg>Work<div class="underLine"></div></a>
  <a href=""><svg height="20" width="20"><circle class="circle" cx="50%" cy="50%" r="9" stroke="#231f20" stroke-width="1" fill-opacity="0" /></svg>About<div class="underLine"></div></a>
</nav>

Animation option when hovering over a link

@keyframes mymove {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 56.52;
  }
}

@-webkit-keyframes mymove {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 56.52;
  }
}

.circle {
  stroke-dasharray:56.52;
  position: absolute;
  top: 0;
  left: 0;
  
}

.link:hover {
animation-duration: 1.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: mymove;
  -webkit-animation-name: mymove;
}
<nav class="footage-nav">
  <a class="link" href="my_work/index.html"><svg height="20" width="20"><circle class="circle" cx="50%" cy="50%" r="9" stroke="#231f20" stroke-width="1" fill-opacity="0" /></svg>Work<div class="underLine"></div></a>
  <a class="link" href=""><svg height="20" width="20"><circle class="circle" cx="50%" cy="50%" r="9" stroke="#231f20" stroke-width="1" fill-opacity="0" /></svg>About<div class="underLine"></div></a>
</nav>

Upvotes: 1

Related Questions