CODEWITHSUNDEEP
csssvg
Karson Kalt
Karson Kalt

Reputation: 162

@keyframes animation on SVG not working

I have an SVG with two nested g elements with classes, .logo-path-1 and .logo-path-2. I have built two @keyframes blink animations so that the two nested elements alternate blinking, however only one is currently working.

I have tried compressing the SVG and have looked at the g elements several times. I have also tried to use the animation-delay: .25s; attribute to reduce number of @keyframes but I can not get the second g to animate properly.

SVG too large to embed snippet, here is a codepen: https://codepen.io/karsonkalt/pen/EmmVQG

Upvotes: 1

Views: 782

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

You are missing the seconds unit ("s") on line 39:

-webkit-animation: blink-2 .25 infinite;

It should be:

-webkit-animation: blink-2 .25s infinite;

Update CodePen.

Upvotes: 2

Related Questions