How to animate a heart?

HTML-CSS
1

Hi guys,

Just messing with FCC and need some advice. I’m trying to implement keyframes and animation & Create a More Complex Shape.

I want to make the heart animated, but as the heart shape is in 3 parts (.heart ::before ::after) the animation only applies to .heart. I guess similar to photoshop and layers.

How do I target the entire heart as a whole? The .heart is animated fine.

Thank you

p.s yes I know that’s funny looking heart. :stuck_out_tongue:

Screenshot 2020-10-29 at 15.17.28
Screenshot 2020-10-29 at 15.17.281803×1564 215 KB

2

The ::before and ::after pseudos are individual elements, they don’t inherit the animation from the element they’re attached to, so you’d have to give them the animation as well.

2 Likes
3

Thank you! That worked perfectly.

1 Like