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 

}