animation rotating boxes css keyframes - html

Question

The boxes are stacked on top of each other using the position: absolute property. When you hover over the container they should rotate with a delay between and have the border turn orange to create some sort of effect.
They aren't moving at all however.
.main-animation-box {
border: solid orange;
height: 30vh;
width: 16vw;
position: absolute;
}
.email-sub-box:hover .main-animation-box-1 {
animation: box-rotate;
animation-iteration-count: infinite;
animation-timing-function: 5s;
animation-delay: 0s;
}
.email-sub-box:hover .main-animation-box-2 {
animation: box-rotate;
animation-iteration-count: infinite;
animation-timing-function: 5s;
animation-delay: 1s;
}
.email-sub-box:hover .main-animation-box-3 {
animation: box-rotate;
animation-iteration-count: infinite;
animation-timing-function: 5s;
animation-delay: 1.5s;
}
.email-sub-box:hover .main-animation-box-4 {
animation: box-rotate;
animation-iteration-count: infinite;
animation-timing-function: 5s;
animation-delay: 2s;
}
.email-sub-box:hover .main-animation-box-5 {
animation: box-rotate;
animation-iteration-count: infinite;
animation-timing-function: 5s;
animation-delay: 2.5s;
}
#keyframes box-rotate {
10% {
border: solid orange;
}
50% {
transform: rotateY(720deg);
}
}
<div class="email-sub-box email-left">
<div class="main-animation-box main-animation-box-1"></div>
<div class="main-animation-box main-animation-box-2"></div>
<div class="main-animation-box main-animation-box-3"></div>
<div class="main-animation-box main-animation-box-4"></div>
<div class="main-animation-box main-animation-box-5"></div>
</div>

Answer 1

i have changed animation: box-rotate; to animation-name: box-rotate; and animation-timing-function: 5s; to animation-timing-function: ease-out;
.main-animation-box {
border: solid orange;
height: 30vh;
width: 16vw;
position: absolute
}
.email-sub-box:hover .main-animation-box-1 {
animation-name: box-rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;
}
.email-sub-box:hover .main-animation-box-2 {
animation-name: box-rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 1s;
}
.email-sub-box:hover .main-animation-box-3 {
animation-name: box-rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 1.5s;
}
.email-sub-box:hover .main-animation-box-4 {
animation-name: box-rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;
}
.email-sub-box:hover .main-animation-box-5 {
animation-name: box-rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2.5s;
}
#keyframes box-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class = "email-sub-box email-left">
<div class="main-animation-box main-animation-box-1"></div>
<div class="main-animation-box main-animation-box-2"></div>
<div class="main-animation-box main-animation-box-3"></div>
<div class="main-animation-box main-animation-box-4"></div>
<div class="main-animation-box main-animation-box-5"></div>
</div>