Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Animating SVG with CSS Keyframe and Line Drawing Animations Creating an SVG Animation Sequence

Lucian Dumitru
PLUS
Lucian Dumitru
Courses Plus Student 13,024 Points
Posted by Lucian Dumitru
Lucian Dumitru
Courses Plus Student 13,024 Points

Animations does not work on Edge/Internet explorer. Why?

Although I added -webkit the animation is still not supported by Edge or IE. Can you help me figure out why?

Below is the CSS code for this lesson.

/* --------------------------
  Keyframes
--------------------------- */

@keyframes grow {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  30% {
    transform: scale(1.1);
    -webkit-transform: scale(0);
  }
  60% {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
  }
}

/* --------------------------
  SVG Styles
--------------------------- */

.badge * {
  -webkit-transform-origin: 180px 180px;
  transform-origin: 180px 180px;
}

.outer,
.inner,
.inline {
  animation: grow 1s ease-out backwards;
  -webkit-animation: grow 1s ease-out backwards;
}

.inner {
  animation-delay: .1s;
  -webkit-animation-delay: .1s;
}

.inline {
  animation-delay: .15s;
  -webkit-animation-delay: .15s;
}
Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Hey Lucian,

Not sure about the IE/Edge issue, but a quick tip for posting code in the forums: You can use the method below to add syntax highlighting to your code. As a moderator, I was able to add this for you, but you can include it yourself in the future.

```css

[your code here]

```

Note those are back-tics, not apostrophes (key to the left of the 1 key). You can use other languages as well, like html, in place of css to get different highlighting.

Cheers :beers:

-Greg

3 Answers

jacobproffer
jacobproffer
24,604 Points
jacobproffer
jacobproffer
24,604 Points

Hey Lucian,

What version of Internet Explorer/Edge are you checking this on? According to W3Schools, properties such as animation-delay should work with Edge 10 and above.

You can also check compatibility with Can I Use. From this site, it appears that animation-delay works with Internet Explorer 11/Edge 13 and 14.

Edit: From the Microsoft documentation, Internet Explorer 10 and above supports animation properties.

Zakk George
Zakk George
4,550 Points
Zakk George
Zakk George
4,550 Points

Definitely follow the advice and head to w3schools. I believe for edge and explorer the syntax is slightly different for CSS animations.

Also CSS animations are still relatively new, so full implementation and support across all browsers hasn't happened yet. My advice to you, Get Chrome. Its a lot more accommodating for developers to learn on.

Lucian Dumitru
Lucian Dumitru
Courses Plus Student 13,024 Points
Lucian Dumitru
Lucian Dumitru
Courses Plus Student 13,024 Points

Thank you Zakk. I'm also using Mozilla and Chrome and the animations are perfectly working but on Edge are not, so i just wanted to know why and how can i fix this. Thank you for your answer anyway!

Thomas Dimnet
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points
Thomas Dimnet
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points

Hello there!

In order to get this to work you maybe have to include prefixer either for IE or Edge. Here is a great site I am used to working with: https://autoprefixer.github.io/

Copy and paste your code inside the left column then grab the new one on your right.

This should work juste fine :).

Keep up the good work!