.middle >ul>li{
    width:20%;
    position: absolute;
}
.middle >ul>li>img{
    height: 350px;
    width: 120%;
}
.middle >ul li:nth-child(1){
    margin-left: 14%;
    z-index: 1;
    transform:  scale(0.6);
    animation: turn 10s ease 3s infinite;
}
.middle >ul li:nth-child(2){
    margin-left: 25%;
    z-index: 2;
    transform:  scale(0.8);
    animation: turn1 10s ease 3s infinite;
}
.middle >ul li:nth-child(3){
    margin-left: 39%;
    z-index: 3;
    animation: turn2 10s ease 3s infinite;
}
.middle >ul li:nth-child(4){
    margin-left: 52%;
    z-index: 2;
    transform:  scale(0.8);
    animation: turn3 10s ease 3s infinite;
}
.middle ul li:nth-child(5){
    margin-left: 65%;
    z-index: 1;
    transform:  scale(0.6);
    animation: turn4 10s ease 3s infinite;
}
.middle ul:hover li:nth-child(-n+5){
    z-index: 99;
    animation-play-state: paused;
}

.liHt{
    line-height: 300px;
}
@keyframes turn {
   
    0%, 100%{
        transform: translateX(0%) scale(0.6);
        z-index:1;
    }
    20%{
        transform: translateX(60%) scale(0.8);
        z-index:2;
    }
    40%{
        z-index:3;
        transform: translateX(120%) scale(1);
    }
    60%{
        transform: translateX(200%) scale(0.8);
        z-index:2;
    }
    80%{
        transform: translateX(300%) scale(0.6);
        z-index:1;
    }
  }
  @keyframes turn1 {
   
    0%{
        transform: translateX(0%) scale(0.8);
        z-index:2;
    }
    20%{
        z-index:3;
        transform: translateX(60%) scale(1);
    }
    40%{
        transform: translateX(140%) scale(0.8);
        z-index:2;
    }
    60%{
        transform: translateX(200%) scale(0.6);
        z-index:1;
    }
    80%{
        transform: translateX(-40%) scale(0.6);
        z-index:1;
    }
    100%{
        transform: translateX(0%) scale(0.8);
        z-index:2;
    }
  } 
  @keyframes turn2 {
   
    0%{
        z-index:3;
        transform: translateX(0%) scale(1);
    }
    20%{
        transform: translateX(60%) scale(0.8);
        z-index:2;
    }
    40%{
        transform: translateX(130%) scale(0.6);
        z-index:1;
    }
    60%{
        transform: translateX(-120%) scale(0.6);
        z-index:1;
    }
    80%{
        transform: translateX(-40%) scale(0.8);
        z-index:2;
    }
    100%{
        z-index:3;
        transform: translateX(-10%) scale(1);
    }
  } 
  @keyframes turn3 {
   
    0%{
        transform: translateX(10%) scale(0.8);
        z-index:2;
    }
    20%{
        transform: translateX(60%) scale(0.6);
        z-index:1;
    }
    40%{
        transform: translateX(-200%) scale(0.6);
        z-index:1;
    }
    60%{
        transform: translateX(-120%) scale(0.8);
        z-index:2;
    }
    80%{
        z-index:3;
        transform: translateX(-30%) scale(1);
    }
    100%{
        transform: translateX(10%) scale(0.8);
        z-index:2;
    }
  } 
  @keyframes turn4 {
   
    0%{
        transform: translateX(0%) scale(0.6);
        z-index:1;
    }
    20%{
        transform: translateX(-260%) scale(0.6);
        z-index:1;
    }
    40%{
        transform: translateX(-200%) scale(0.8);
        z-index:2;
    }
    60%{
        
        z-index:3;
        transform: translateX(-130%) scale(1);
    }
    80%{
        transform: translateX(-20%) scale(0.8);
        z-index:2;
    }
    100%{
        transform: translateX(0%) scale(0.6);
        z-index:1;
    }
  }