Why is the ball not orbiting?

N

NeonCoder2019-06-21 14:26:28

css

NeonCoder, 2019-06-21 14:26:28

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"></div>
  </div>
</body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
}

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

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: myOrbit 4s 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)

S

sergski, 2019-06-21
@NeonCoder

snippet