html, body {
margin: 0;
height: 100%;
background-color: rgba(2, 2, 2, 0.781);
}
.container {
height: 100%;
display: flex;
justify-content: center;
}
.ringContainer {
width: 175px;
height: 175px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 15%;
border: 3.5px solid rgba(255, 255, 255, 0.897);
animation:oppositeSpin 4s linear infinite;
}
.child {
width: 70px;
height: 70px;
background-color: rgba(255, 255, 255, 0.897);
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 3.5px solid rgba(255, 255, 255, 0.897);
animation: spin 4s linear infinite;
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
@keyframes oppositeSpin {
100% {
-webkit-transform: rotate(-360deg);
transform:rotate(-360deg);
}
}
@keyframes slide {
from {
margin-left: 100%;
}
50% {
margin-left: 47%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>RotatingBox</title>
<link rel="stylesheet" type="text/css" href="./RotatingBoxStyle.css">
</head>
<body>
<div class="container">
<div class="ringContainer"></div>
<div id="rotatingSquare" class="child"></div>
</div>
<script src="./index.js"></script>
</body>
</html>So far I have an outer ring I've made to spin counter clockwise, and then I have a square that is in the middle of the ring that I've made spin clockwise. Both of those are in their own divs and then inside a big div. I'm trying to get the square to slide + spin simultaneously across the screen from the edge of the screen to the middle of the ring and stop. It's supposed to stop sliding after it's done it once and never slide again but to continue to spin indefinitely. I'm using @keyframes to get it spin and slide. So far I've gotten it to slide and spin at the same time but have not gotten the sliding to stop and the spinning to continue.