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

Posted by Evan MacAlpine
Evan MacAlpine
7,173 Points

Css animation not working in Safari

I've gone over this a couple times and can't figure out why the animations aren't working in the preview. Any help is appreciated. https://w.trhou.se/mz20hbh9cs

1 Answer

Shawn Ramsey
Shawn Ramsey
27,237 Points
Shawn Ramsey
Shawn Ramsey
27,237 Points

I forked your Workspace and this worked in Safari for me. You need to add the -webkit- vendor prefix before transform.

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

You also need to add the animation to the .badge class and remove the unnecessary comma after the .inline class.

.badge * {
  -webkit-transform-origin: 50% 50%;
}

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

In a real world example, you would want to add the animation without the vendor prefix as well as including any vendor prefixes that may be necessary for other browsers. Check http://caniuse.com/ to see which browsers support these properties without the vendor prefix.

Hope that helps :)

Evan MacAlpine
Evan MacAlpine
7,173 Points

Thanks Shawn! That's was very helpful. It's working now!