What's wrong in this code? please explain because I don't get exact result in chrome

<html>
 <head>
  <style>  

    .stars {
       background-color: #ffef00;
       height: 30px;
       width: 30px;
       border-radius: 50%;
       animation-iteration-count: infinite;
  }

    .star-1 {
      margin-top: 15%;
      margin-left: 60%
      animation-name: t-1;
      animation-duration: 1s;
  }

     .star-2 {
        margin-top: 25%;
        margin-left: 25%
        animation-name: t-2;
        animation-duration: 1s;
  }

    @keyframes t-1 {
     30% {
      transform: scale(0.4);
       opacity: 0.5
   }
  }

     @keyframes t-2 {
      30% {
      transform: scale (0.4);
      opacity: 0.5;
   }
  }
    #div-main  {
     position: fixed;
     margin: 0;
     padding: 0;
     top: 0;
     left: 0;
     background-color: #00FFFF;
     width: 1000%
     height: 1000%
  }

  </style>
 <title> R.K Vlogs </title>
</head>
  <body>
        <div id="div-main"> <h6> R.K vlogs</h6></div>
        <div class="star-1 stars"></div>
        <div class="star-2 stars"></div>
  </body>
</html>

Hi and welcome to the forum!

Can you please provide some more information about what is wrong with this code? How is it not doing what you expect?


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
 @keyframes t-1 {
     30% {
      transform: scale(0.4);
       opacity: 0.5
   }
  }

     @keyframes t-2 {
      30% {
      transform: scale (0.4);
      opacity: 0.5;
   }
  }

should be

@keyframes t-1 {
     0% {
      transform: scale(1);
       opacity:1
   }
     50% {
      transform: scale(0.4);
       opacity: 0.5
   }
     100% {
      transform: scale(1);
       opacity: 1
   }
  }

     @keyframes t-2 {
     0% {
      transform: scale (1);
      opacity: 1;
   }    
      50% {
      transform: scale (0.4);
      opacity: 0.5;
   }
      100% {
      transform: scale (1);
      opacity: 1;
   }
  }

there should be 0% and end with a 100% for @keyframes…
I see you want it to be smaller and bigger.
Hope this helps…

2 Likes

i think my “animation name” isn’t working

That’s right, it’s not working because in the line(s) above, you’ve forgotten a semicolon.

2 Likes