CSS翻译关键帧动画和悬停缩放不一起工作答案

【问题标题】：CSS translate with keyframe animation and scale on hover not working togetherCSS翻译关键帧动画和悬停缩放不一起工作
【发布时间】：2026-02-21 05:25:01
【问题描述】：

我对 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>

谢谢。

【问题讨论】：

标签： html css css-transforms keyframe

【解决方案1】：

我今天遇到了问题，我也不知道原因，但是我通过在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

}

【讨论】：