How to make the ball have a different starting point?

N

NeonCoder2019-07-01 12:12:27

css

NeonCoder, 2019-07-01 12:12:27

There is a ball, it spins in a circle. I want to change its start point, but I can't figure out how.
Here is the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Animation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="circle" id="circle"></div>
  </div>
</body>
</html>

Here is the CSS:

* {
  margin: 0;
  padding: 0;
}

body {
  background: #111111;
}

.container {
  margin: 200px auto 0;
  width: 300px;
  height: 300px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  position: relative;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: red;
  position: absolute;
  top: calc(50% - 25px);
        left: calc(50% - 25px);
  transform: translate(-50%, -50%);
}

.animate {
  animation: myOrbit 10s linear infinite;
}

@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

0

0xD34F, 2019-07-01
@NeonCoder

Specify negative animation-delay. Or turn .containerthrough transform: rotate.