Adding color to beating heart

HTML-CSS
1

I apologize in advance if this is a boring question or to simple but I’m struggling to properly apply color to a beating heart. Example is pulled from free code camp and I believe the color is only being applied to the main heart class which will show a little color at the bottom of the heart. Under the impression that heart:before and heart:after do not need animation properties. Thank you!

.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
animation-iteration-count: infinite;
}

.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart:after {
background-color: pink;
content: “”;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;

}
.heart:before {
background-color: pink;
content: “”;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;

}

@keyframes backdiv {
50% {
background: #ffe6f2;
}
}

@keyframes beat {
0% {
transform: scale(1) rotate(-45deg); background-color: purple;
}
50% {
transform: scale(0.6) rotate(-45deg); background-color: red;
}
}

Pineapple
2

First, make sure your code is properly formatted. It’s very difficult to read it.

You can format it in the editor. Also add a link to the exercise so we know what challenge you are working on.

3

try background: red;

4

Can you elaborate very briefly on what you mean by formatting in the ide. I don’t want to maintain that bad practice and want the code to look proper.

Thank you,
Your FreeCodeCamp noob

5

You can format the code in your post using the </> button in the post editor, in this way your code will be surrounded by backticks without you having to type them.

For multiline code snippets be sure to have a line with three backticks above the code and a line with three backticks below the code

6

I ended up setting the background-color to inherit for heart:before and heart:after. It worked but is this proper practice?

7

I just found that option in the post editor. Is adding the backticks suppose to help with visual representation and separating the content in general to navigate easier?

8

Surround it in triple backticks like the example for full line code, single backticks for things like keywords (example, background-color)
Example:

text

Image:
snippy

9

If the pseudo-element does not need to have it’s own starting color then having it inherit the color makes sense. And then yes, it won’t need its own animation. However, if the pseudo-element does have it’s own starting color, you also need to apply the animation for the color change to it as well.

I would suggest using a much simpler example to play with and test.

1 Like
10

Don’t feel sorry man . we are here to learn and help each other so feel free to ask any thing you get to know more about it and yeah It helps you a lot .@FfejNnyl

1 Like
11

Of course it is…

1 Like