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

Posted by Christopher Paccione
Christopher Paccione
14,831 Points

CSS SVG animation @keyframes (not working in Chrome and Safari)

Hello everyone,

I'm creating a simple animation for a website I'm working on, and I can't get it to work in Safari or Chrome using the webkit vendor prefix. Can you help, and tell me what I might be doing wrong?

It's only working in Firefox. It's not working in IE or Opera, but I figure I should tackle the Chrome/Safari version first.

Here is my code from my stylesheet below. It's working in a codepen, and I will also link to the website.

http://thermflo.msistaging.com/

#glow {
  -webkit-animation: glowing 2s infinite alternate;
  -moz-animation: glowing 2s infinite alternate;
  -ms-animation: glowing 2s infinite alternate;
  -0-animation: glowing 2s infinite alternate;
  animation: glowing 2s infinite alternate;
}

@keyframes glowing {
  to {
    fill: #A0F536;
  }
}

@-webkit-keyframes glowing {
    to {
        fill: #A0F536;
    }
}

@-moz-keyframes glowing {
    to {
        fill: #A0F536;
    }
}

@-ms-keyframes glowing {
    to {
        fill: #A0F536;
    }
}

@-o-keyframes glowing {
    to {
        fill: #A0f536;
    }
}
Lauri Neuding
Lauri Neuding
13,525 Points

If all this animation does is make the counter of the logo's "o" alternate between white and green, then it is working in my Chrome and Firefox. It is not working in my IE either, but I've had trouble with changing fills in IE. I worked around that problem with opacity, which gives me an idea I might try. How about putting two shapes on top of each other and using opacity to reveal the bottom one?

I would also check on caniuse.com, but I think you only need -webkit- (Chrome and Safari) and the standard.

Christopher Paccione
Christopher Paccione
14,831 Points

Lauri,

Thanks for the response. I'll take your suggestion with IE, but I still can't get it to work for me in Chrome or Safari. Do you know what version of Chrome you're viewing the site in?

thanks,

Chris

Lauri Neuding
Lauri Neuding
13,525 Points

Christopher, it looks like I am using Chrome 47. I know it is frustrating sometimes. For instance, right now the only way I can check Safari is to use a computer in a school (I am working as a substitute teacher) and there my SVGs tend to look really broken although Safari should be fine with -webkit-. I suspect it may be a version problem as the computers I encounter in schools tend to be on MacBook Pro 2012 and the schools tend to use Mozilla instead of Safari. On the other hand, I have one animated SVG that looks great in Chrome and Firefox on my computer, but in IE it looks fine except it isn't where it's supposed to be.

Christopher Paccione
Christopher Paccione
14,831 Points

Lauri,

I think I'm getting closer. I pulled the SVG out of the WordPress installation, and put up an HTML file on my site which you can see here. http://chrispaccione.com/SVG_test/

The glow works fine; I guess this is a WordPress problem, and not a Chrome problem.

Lauri Neuding
Lauri Neuding
13,525 Points

Try this: First add a fill attribute to <rect class="glow" x="247.1" y="8.3" width="11.5" height="4" fill="#A0F536" />

Then change the keyframes to: @-webkit-keyframes glowing { 0% { opacity: 0;} 100% { opacity: 1;} } @keyframes glowing { 0% { opacity: 0;} 100% { opacity: 1;} }

I now have it working in IE as well.

Christopher Paccione
Christopher Paccione
14,831 Points

Thanks Lauri, I really appreciate your help, but I can't get it to work. The animation works fine outside of WordPress.

The only way I can get it to work in WordPress is by using Chrome and Safari in their "incognito" modes. That doesn't make any sense to me, but I give up.

I've wasted so much time for a such a simple animation. I'm going to make a gif or try JavaScript when I'm less frustrated.

Lauri Neuding
Lauri Neuding
13,525 Points

Best of luck, then. I haven't used Wordpress much and mostly build from scratch. A casual search informs me that you probably need a plugin, but you probably already know that.

Christopher Paccione
Christopher Paccione
14,831 Points

Lauri,

I just figured it out!

The fill color I had set on the SVG inline code was overriding the animation (smacks head). It was a bonehead mistake, but at least I won't forget it. I used your opacity suggestion for IE.

Thanks again for helping me work through the problem!