html - 动画旋转框 css 关键帧

Question

position: absolute使用该属性将这些盒子堆叠在一起。当您hover越过容器时，它们应该rotate带有delay中间并border变成橙色以产生某种效果。
然而，它们根本不动。

.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>

标签： htmlcss

Answer 1

我已经改变animation: box-rotate;了animation-name: box-rotate;animation-timing-function: 5s;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>