CODEWITHSUNDEEP
csssvg
TheRealPapa
TheRealPapa

Reputation: 4539

CSS Animation for SVG not working

I understand this animation should work on SVGs as it does on HTML elements but obviously I am wrong!

How do I achieve this effect with CSS on an SVG? Fiddle here.

div {
  background: blue;
  width: 400px;
  height: 100px;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0% {
    filter: brightness(1);
    filter: contrast(1);
    -webkit-filter: brightness(1);
    -webkit-filter: contrast(1);
  }
  50% {
    filter: brightness(0.1);
    filter: contrast(0.1);
    -webkit-filter: brightness(0.1);
    -webkit-filter: contrast(0.1);
  }
  100% {
    filter: brightness(1);
    filter: contrast(1);
    -webkit-filter: brightness(1);
    -webkit-filter: contrast(1);
  }
}

Upvotes: 0

Views: 72

Answers (1)

Ovidiu Unguru
Ovidiu Unguru

Reputation: 756

Change the div from css to svg . It works for me.

Or if you want to see both the div and svg, just add div, svg { css code..}

Example: http://jsfiddle.net/4ebv7jzd/1/

Upvotes: 2

Related Questions