CODEWITHSUNDEEP
htmlcsssvgcss-animations
richardstelmach
richardstelmach

Reputation: 373

CSS keyframe animation not working on an SVG

Please see:

http://codepen.io/richardstelmach/pen/RNwvyG

"svg" is the id of the in the html.

The CSS is:

#svg{
  display:block;
  max-height:400px;
  margin:0 auto;
  animation:filters 2s infinite;
}

#svg .colour1{
  fill:#2bb0b7;
}

#svg .colour2{
  fill:#ab3e41;
}

/* animate effects */

@keyframes filters {
  0%{ 
    filter:hue-rotate(0deg); 
  }
  100% { 
    filter:hue-rotate(360deg); 
  }
}

The animation isn't working. I've tried changing it to specific -webkit- CSS and also tried applying it to the class ".colour1" instead but to no avail.

I also tried animating the fill instead of using the hue-rotate. But again, no luck.

Upvotes: 2

Views: 1972

Answers (3)

richardstelmach
richardstelmach

Reputation: 373

Basically needed to browser prefix everything. :

#svg{
  display:block;
  max-height:400px;
  margin:0 auto;
  -webkit-animation:filters 20s infinite;
}

#svg .colour1{
  fill:#2bb0b7;
}

#svg .colour2{
  fill:#ab3e41;
}

/* animate effects */

@-webkit-keyframes filters{
  0%{ 
    -webkit-filter:hue-rotate(0deg); 
  }
  100% { 
    -webkit-filter:hue-rotate(360deg); 
  }
}

Finished code here: http://codepen.io/richardstelmach/pen/RNwvyG

Will need to add in other pre-fixes for other browsers.

Upvotes: 0

Mircea
Mircea

Reputation: 11593

Just add vendor prefix and its beautiful:

@keyframes filters {
  0%{ 
    -webkit-filter:hue-rotate(0deg); 
  }
  100% { 
    -webkit-filter:hue-rotate(360deg); 
  }
}

Upvotes: 3

Turnip
Turnip

Reputation: 36632

You need to prefix your filters too:

DEMO

@-webkit-keyframes filters {
  0%{ 
    -webkit-filter:hue-rotate(0deg); 
  }
  100% { 
    -webkit-filter:hue-rotate(360deg); 
  }
}

Upvotes: 1

Related Questions