Background property

HTML-CSS
1

reference lesson: Applied Visual Design: Animate Elements at Variable Rates

I am trying to replicate on my own computer this exercise and I don’t understand something about this code:

<style> /* styling is in a separate css file*?
.stars {
	background-color: black;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	animation-iteration-count: infinite;
}
.star1 {
	margin-top: 15%;
	margin-left: 60%;
	animation-name: twinkle1;
	animation-duration: 1s;
}
.star2  {
	margin-top: 25%;
	margin-left: 30%;
	animation-name: twinkle1;
	animation-duration: 1s;
}

#back {
	position: fixed;
	padding: 0;
	margin: 0;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
	background: linear-gradient(black, hsl(233, 100%, 20%), hsl(233, 100%, 42%), hsl(211, 74%, 55%), hsl(314, 69%, 76%));
	
}

<body>
<div id="back"></div>
		<div class="star1 stars"></div>
		<div class="star2 stars"></div>
</body>

If I run this code, I can’t see the divs with the class stars in the browser.
If I add the keyframes between .star2 and #back , the stars are visible:

@keyframes twinkle1 {
20% {
transform: scale(0.5);
opacity: 0.5;
}

My question is why by adding the keyframes, the divs are showing in the browser?
I understand that the background of the div with the id of #back is blocking the stars but why by adding the keyframes, the stars are appearing?
Could someone explain this behavior?

Thanks!

2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums