I don't know why the background does not work

I wanted to have a black background so created a class named “sky”, however it does not work. Without the two balls, the black background shows. What is wrong with my code?

.balls{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: fixed;
  background-color: #efebf2;
  animation-iteration-count: infinite;
  animation-name: fall;
  animation-duration: 3s;
  }
  
 .ball1{
 left:30%;
 animation-timing-function: ease-in;
 }
 
 .ball2{
 left:60%;
 animation-timing-function: ease-out;
 }
 
 
 @keyframes fall{
  0%{
   top:10%;
  }
  100%{
   top: 50%;
  {
 }
 
 .sky{
  height:100%;
  width: 100%;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  }
  


</style>
</head>
<body>
 <div class="sky"></div>
 <div class="balls ball1"></div>
 <div class="balls ball2"></div>

</body>  
</html>

Preformatted text``Preformatted text

You’ve only provided half of the puzzle

Sorry, I just figured out how to paste my code into the editor. I don’t understand why the sky class does not work here. Any comment would be helpful - thank you!

The issue I found was not with the Sky class. Check out your opening and closing brackets on the below piece of code. I did and it now works for me. Check from 100% down.

@keyframes fall{
0%{
top:10%;
}
100%{
top: 50%;
{
}

I put into VSC which is handy for finding errors. This is actually something I have not done yet myself. So I’m busy scratching my head over how it works. By the way I make these sort of errors all the time to :slight_smile:

Thank you so much! Now it works! :grinning: