course_freecodecamp/animation2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation</title>
</head>
<body>
  <style>
    .stars {
      background-color: white;
      height: 30px;
      width: 30px;
      border-radius: 50%;
      animation-iteration-count: infinite;
    }
  
    .star-1 {
      margin-top: 15%;
      margin-left: 60%;
      animation-name: twinkle-1;
      animation-duration: 1s;
    }
  
    .star-2 {
      margin-top: 25%;
      margin-left: 25%;
      animation-name: twinkle-2;
      animation-duration: 1s;
    }
  
    @keyframes twinkle-1 {
      50% {
        transform: scale(0.5);
        opacity: 0.5;
      }
    }
  
    @keyframes twinkle-2 {
      20% {
        transform: scale(0.5);
        opacity: 0.5;
      }
    }
  
    #back {
      position: fixed;
      padding: 0;
      margin: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
    }
  </style>
  
  <div id="back"></div>
  <div class="star-1 stars"></div>
  <div class="star-2 stars"></div>
</body>
</html>