move elements around object clockwise with CSS - html

Question

given this example here
#mainPage {
width: 400px;
height: 165px;
margin: 10% auto;
}
#mainPage>p {
text-align: center;
}
.box {
width: 48px;
height: 30px;
background: red;
}
#title {
letter-spacing: 7px;
font-size: 30px;
margin-bottom: 30px;
}
#box1 {
animation: moveBox1 5s infinite;
}
#box2 {
animation: moveBox2 5s infinite;
}
#keyframes moveBox1 {
from {
/* currentPosition */
}
25% {
/* right top corner */
}
50% {
/* right bottom corner */
}
75% {
/* left bottom corner */
}
to {
/* start position */
}
}
#keyframes moveBox2 {
from {
/* currentPosition */
}
25% {
/* left bottom corner */
}
50% {
/* left top corner */
}
75% {
/* right top corner */
}
to {
/* start position */
}
}
<div id="mainPage">
<div class="box" id="box1"></div>
<p id="title">TITLE HERE</p>
<div class="box" id="box2"></div>
</div>
I want to position box2 to the right side first.
After doing so the two boxes should move around the text clockwise. I tried to start with the animation syntax but I don't know how to position them that they can move around other elements.
So box1 should have this path:
from left top
to right top
to right bottom
to left bottom
back to left top
box2 would have this path:
from right bottom
to left bottom
to left top
to right top
back to right bottom
Could someone help?

Answer 1

Using transform, you can achieve your solution.
#mainPage {
width: 400px;
height: 165px;
margin: 10% auto;
}
#mainPage>p {
text-align: center;
}
.box {
width: 48px;
height: 30px;
background: red;
}
#title {
letter-spacing: 7px;
font-size: 30px;
margin-bottom: 30px;
}
#box1 {
animation: moveBox1 5s infinite;
}
#box2 {
animation: moveBox2 5s infinite;
}
#keyframes moveBox1 {
from {
transform: translate(0, 0);
}
25% {
transform: translate(350px, 0);
}
50% {
transform: translate(350px, 150px);
}
75% {
transform: translate(0, 150px);
}
to {
transform: translate(0, 0);
}
}
#keyframes moveBox2 {
from {
transform: translate(350px, 0);
}
25% {
transform: translate(0, 0);
}
50% {
transform: translate(0, -150px);
}
75% {
transform: translate(350px, -150px);
}
to {
transform: translate(350px, 0);
}
}
<div id="mainPage">
<div class="box" id="box1"></div>
<p id="title">TITLE HERE</p>
<div class="box" id="box2"></div>
</div>

Answer 2

You could use absolute position on red box elements, and then use css animations to change its positions. This will also take box elements out of normal flow of elements.
body {
text-align: center;
}
#element{
text-align: center;
display: inline-block;
position: relative;
margin-top: 30px;
padding: 30px;
}
.box {
width: 48px;
height: 30px;
background: red;
position: absolute;
}
#title {
letter-spacing: 7px;
font-size: 30px;
margin: 0;
}
#box1 {
animation: moveBox1 5s infinite;
top: 0;
left: -48px;
}
#box2 {
animation: moveBox2 5s infinite;
bottom: 0;
right: 48px;
}
#keyframes moveBox1 {
25% {left: 100%; top: 0}
50% {left: 100%; top: calc(100% - 24px)}
75% {left: -48px; top: calc(100% - 24px)}
100% {left: -48px; top: 0}
}
#keyframes moveBox2 {
25% {right: 100%; bottom: 0;}
50% {right: 100%; bottom: calc(100% - 24px);}
75% {right: -48px; bottom: calc(100% - 24px);}
100% {right: -48px; bottom: 0;}
}
<div id="element">
<div class="box" id="box1"></div>
<p id="title">TITLE HERE</p>
<div class="box" id="box2"></div>
</div>

Answer 3

I'm not exactly sure what effect are you looking for but here is exampe of how you might want to position them:
#mainPage {
width: 400px;
height: 165px;
margin: 10% auto;
}
#mainPage>p {
text-align: center;
}
.box {
width: 48px;
height: 30px;
background: red;
position:absolute;
}
#title {
letter-spacing: 7px;
font-size: 30px;
margin-bottom: 30px;
}
#box1 {
animation: moveBox1 5s infinite;
}
#box2 {
animation: moveBox2 5s infinite;
}
#keyframes moveBox1 {
from {
left:170px;
top:30px;
}
25% {
left:500px;
top:30px;
}
50% {
left:500px;
top:135px;
}
75% {
left:170px;
top:135px;
}
to {
left:170px;
top:30px;
}
}
#keyframes moveBox2 {
from {
left:500px;
top:30px;
}
25% {
left:500px;
top:135px;
}
50% {
left:170px;
top:135px;
}
75% {
left:170px;
top:30px;
}
to {
left:500px;
top:30px;
}
}
<div id="mainPage">
<div class="box" id="box1"></div>
<p id="title">TITLE HERE</p>
<div class="box" id="box2"></div>
</div>

Answer 4

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: myfirst 5s infinite; /* Safari 4.0 - 8.0 */
animation: myfirst 5s infinite;;
}
.div2 {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: myfirst 5s infinite; /* Safari 4.0 - 8.0 */
animation: mysecond 5s infinite;;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes myfirst {
0% { left: 0px; top: 0px;}
25% { left: 400px; top: 0px;}
50% { left: 400px; top: 400px;}
75% { left: 0px; top: 400px;}
100% { left: 0px; top: 0px;}
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes mysecond {
0% { left: 400px; top: 200px;}
25% { left: 0px; top: 0px;}
50% { left: 0px; top: -100px;}
75% { left: 400px; top: -100px;}
100% { left: 400px; top: 200px;}
}
#keyframes myfirst {
0% { left: 0px; top: 0px;}
25% { left: 400px; top: 0px;}
50% { left: 400px; top: 400px;}
75% { left: 0px; top: 400px;}
100% { left: 0px; top: 0px;}
}
#keyframes mysecond {
0% { left: 400px; top: 200px;}
25% { left: 0px; top: 200px;}
50% { left: 0px; top: -100px;}
75% { left: 400px; top: -100px;}
100% { left: 400px; top: 200px;}
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>