CSS转换与关键帧动画和悬停缩放不能一起工作
CSS转换与关键帧动画和悬停缩放不能一起工作
提问于 2014-11-22 17:48:45
我是CSS的新手。我看到了很多类似的话题，但我找不到解决这个问题的方法，所以我就问了。
我正在尝试创建一个带有关键帧动画的照片横幅，其中图像滚动到左侧，并使用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>谢谢。
Stack Overflow用户
发布于 2017-04-13 15:42:03
我今天遇到了这个问题，我也不知道原因，但我通过在animation-div标签之外添加一个额外的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
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27076039
复制相关文章
相似问题
腾讯云开发者
