CSS翻譯關鍵幀動畫和懸停縮放不協同

Question

我是比較新的CSS。我看到很多類似的話題，但是我找不到解決這個問題的方法，所以我會問。

我正在嘗試創建一個帶有關鍵幀動畫的photobanner，其中圖像滾動到左側並使用img：hover進行縮放。翻譯轉換工作正常，並且縮放轉換工作正常，但後者僅適用於刪除關鍵幀動畫的css。我怎樣才能讓這兩個轉換同時工作？

我的CSS如下：

.photobannerContainer { 
    margin: 0 auto; 
    width: 90%; 
    overflow: hidden; 
} 

.photobanner { 
    height: 480px; 
    width: 8000px; /* To contain all the images end-to-end. */ 
} 

.photobanner img { 
    height:100%; 

    transition: all .2s ease; 

    /*If I remove these lines then the scale transformation will work.*/ 
    -webkit-animation: bannermove 30s linear infinite; 
    -moz-animation: bannermove 30s linear infinite; 
    -ms-animation: bannermove 30s linear infinite; 
    -o-animation: bannermove 30s linear infinite; 
    animation: bannermove 30s linear infinite; 
} 

.photobanner img:hover { 
    transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -o-transform: scale(1.1); 
} 

@keyframes bannermove { 
    0% { 
     transform: translateX(0); 
    }  
    100% { 
     transform: translateX(-3726px); 
    } 
} 

@-moz-keyframes bannermove { 
    0% { 
     -moz-transform: translateX(0); 
    }  
    100% { 
     -moz-transform: translateX(-3726px); 
    } 
} 



@-webkit-keyframes bannermove { 
    0% { 
     -webkit-transform: translateX(0); 
    } 
    100% { 
     -webkit-transform: translateX(-3726px); 
    } 
} 

@-ms-keyframes bannermove { 
    0% { 
     -ms-transform: translateX(0); 
    } 
    100% { 
     -ms-transform: translateX(-3726px); 
    } 
} 



@-o-keyframes bannermove { 
    0% { 
     -o-transform: translateX(0); 
    } 
    100% { 
     -o-transform: translateX(-3726px); 
    } 
} 

的HTML被設置如下：

<div class="photobannerContainer"> 
<div class="photobanner"> 

<img src="url"/> 

<img src="url"/> 

<img src="url"/> 

<img src="url"/> 

<img src="url"/> 

<img src="url"/> 

<img src="url"/> 

<img src="url"/> 

<img src="url"/> 

</div> 
</div> 

謝謝。

Answer 1

今天，我的問題，我不知道的原因太多，但我解決它通過添加額外的div標記出方animation-div標籤，並把transition在外面div 像：

HTML

<div class="extra-div"> 
    <div class="animation-div"> 
    </div> 
</div> 

CSS

.extra-div{ 
    transition: all .2s ease; 
} 
.extra-div:hover{ 
transform: scale(1.9); 
} 
.animation-div { 
    animation: myAnime 0.2s ease-out 

}