我对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>
谢谢。
答案 0 :(得分:0)
我今天遇到了问题,我也不知道原因,但是我通过在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
}