Adding an animation to an element on button click

Asked Jun 19 '14 at 15:37

Active Jun 19 '14 at 15:37

Viewed 30 times

I am trying to add an animation effect to an SVG Path when a button is clicked

JSFiddle as requested: http://jsfiddle.net/xH7FF/

I have the following animation:

 .path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

So when a button is clicked

$("#buttonhere").click(function(){
    $("#pathname").addClass("path");
}

It should add the class to the path, and the animation should start, but it does not. Anybody know if these is possible, and if so what I am doing wrong, or what I can do to fix it. Thanks!

asked Jun 19 '14 at 15:37

Bobby W

JSFiddle: http://jsfiddle.net/xH7FF/ – Bobby W Jun 19 '14 at 15:41
1

Remember to include `-webkit-` as Chrome and Safari still don't support the default `@keyframes` and `animation` CSS declarations. (ie. add `-webkit-animation:` and `@-webkit-keyframes`) – Kodlee Yin Jun 19 '14 at 15:50
Aha----http://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass – Paulie_D Jun 19 '14 at 15:58
1

Just upvote the orignal answer. – Paulie_D Jun 19 '14 at 16:01

Adding an animation to an element on button click

0 Answers0