Moving circle CSS animation-CodePudding

I want to make a circle animation on my page, The circle should go from top left > top right > bottom right > bottom left > top left in that order.

My code so far:

.box {
  width: 300px;
  height: 300px;
  border: 10px solid black;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation-name: slideme;
  animation-duration: 7s;
}

@keyframes slideme;
{}

<div ></div>

CodePudding user response：

<!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>circle animation</title>
    <style>
*{
  padding: 0;
  margin:0;
  box-sizing: border-box;
}

.box {
  width: 50px;
  height: 50px;
  border: 10px solid black;
  border-radius: 50%;
  position: absolute;
  animation-name: slideme;
  animation-duration: 4s;
}
@keyframes slideme {
  0% {
    top: 0;
    left: 0;
  }

  25% {
    top: 0%;
    left: 90%;
  }

  50% {
    top: 90%;
    left: 90%;
  }
  
   75% {
    top: 100%;
    left: 0%;
  }
    100% {
    top: 0%;
    left: 0%;
  }
}
    </style>
</head>
<body>
    <div ></div>

</body>
</html>

CodePudding user response：

I am not providing the exact solution. I think this is helpful for a better learning experience.

To show how it generally works, I have added a 0% and 100% to the keyframes. I am moving the circle from top left to bottom right.

@keyframes slideme {
  0%{
    top: 0;
    left: 0;
  }

  100% {
    top: 100%;
    left: 100%;
  }
}

You can easily adjust the example to your needs by adding states in between before returning to the original position, for example:

  50% {
    top: 50%;
    left: 50%;
  }

You can learn more about keyframes on MDN.

<!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>circle animation</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            top: 0;
            left: 0;
            border: 10px solid black;
            border-radius: 50%;
            position: absolute;
            animation-name: slideme;
            animation-duration: 7s;
        }
        @keyframes slideme {
          0%{
            top: 0;
            left: 0;
          }
          100% {
            top: 100%;
            left: 100%;
          }
       }

    </style>
</head>
<body>
    <div ></div>

</body>
</html>