如何在悬停效果上使用幻灯片动画移动带有“框”类的 div

Question

如何制作一个已经应用了一些过渡的div(类为box(，并且想在同一div上添加悬停效果的幻灯片动画？

.box {
  background-color: red;
  width: 70px;
  height: 70px;
  transition-property: background, color;
  transition-duration: .2s, 4s;
  transition-timing-function: linear, ease-out;
  transition-delay: 2s, ;
 }

@keyframes slide{
    0% {
     left: 0;
     top: 0;
    }
    50% {
     left: 244px;
     top: 100px;
    }
    100% {
     left: 488px;
     top: 0;
    }
 }

.box:hover .box{
  background-color: yellow;
  color:white;
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
  animation-iteration-count: infinite;
}

.html：

 <div class="box"> </div>

Answer 1

我只是将绝对位置 .box{position：absolute} 添加到 .box 类并将 .box：hover .box 更改为 .box：hover。希望这个帮助

       
     
.box {
          position: absolute;
          background-color: red;
          width: 70px;
          height: 70px;
          transition-property: background, color;
          transition-duration: .2s, 4s;
          transition-timing-function: linear, ease-out;
          transition-delay: 2s, ;
         }
        
        
        @keyframes slide{
            0% {
             left: 0;
             top: 0;
            }
            50% {
             left: 244px;
             top: 100px;
            }
            100% {
             left: 488px;
             top: 0;
            }
         }
        
        
        
        .box:hover{
          background-color: yellow;
          color:white;
          animation-name: slide;
          animation-duration: 2s;
          animation-timing-function: ease-in-out;
          animation-delay: .5s;
          animation-iteration-count: infinite;
        }
    

 
        <div class="box"> </div>