您的位置: 首页  >  技术问答  >  CSS关键帧悬停动画无法在Chrome中工作

CSS关键帧悬停动画无法在Chrome中工作

分类: 技术问答 • 2022-09-14 18:13:26
问题描述：

我最近迁移了我的网站，并且稍微简单的CSS悬停动画停止了在Chrome中的工作。CSS关键帧悬停动画无法在Chrome中工作

动画在IE和Firefox中工作。

我指的动画可以看出在： http://a1decals.com/products-page/tech-stuff-decals/coexist-decal-sticker-operating-systems/

如果您单击产品图库的图像上，它会弹出到全尺寸，然后动画生效，而徘徊。

我有一堆CSS动画没有任何问题，并且用于在其他主机上工作。

.highslide-wrapper, 
.highslide-outline, 
.highslide-wrapper:hover, 
.highslide-outline:hover { 
background-color: rgba(0, 0, 0, 0) !important; 
z-index: 99999999 !important; 
} 
.highslide-image { 
z-index: 99999999 !important; 
border-style: solid !important; 
border-color: #1a00ff !important; 
border: 12px solid rgb(16, 0, 240) !important; 
padding: 15px !important; 
-webkit-border-radius: 10px !important; 
-moz-border-radius: 10px !important; 
border-radius: 10px !important; 
} 
.highslide-image:hover { 
cursor: crosshair; 
z-index: 99999999 !important; 
-webkit-animation-name: rotateA; 
-webkit-animation-duration: 12s; 
-webkit-animation-iteration-count: 1; 
-webkit-transition-timing-function: linear; 
-moz-animation-name: rotateA; 
-moz-animation-duration: 12s; 
-moz-animation-iteration-count: 1; 
-moz-transition-timing-function: linear; 
-moz-animation-fill-mode: forwards; 
-ms-animation-name: rotateA; 
-ms-animation-duration: 12s; 
-ms-animation-iteration-count: 1; 
-ms-transition-timing-function: linear; 
animation-name: rotateA; 
animation-duration: 12s; 
animation-iteration-count: 1; 
transition-timing-function: linear; 
} 
@keyframes rotateA { 
35% { 
    -webkit-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    -moz-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    -o-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    -ms-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    background-color: rgba(0, 0, 0, 0) !important; 
} 
40% { 
    -webkit-transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    -moz-transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    -o-transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    -ms-transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    background-color: rgba(0, 0, 0, 0) !important; 
} 
50% { 
    -webkit-transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    -moz-transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    -o-transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    -ms-transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    background-color: rgba(0, 0, 0, 0) !important; 
} 
55% { 
    -webkit-transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    -moz-transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    -o-transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    -ms-transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
    transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
} 
60% { 
    -webkit-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
    -moz-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
    -o-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
    -ms-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
    transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
    background-color: rgba(212, 36, 36, 0.8); 
} 
100% { 
    -webkit-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
    -moz-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
    -o-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
    -ms-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
    transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
    background-color: rgba(212, 36, 36, 0.8); 
} 
}

尝试清除浏览器Cookie，尝试了不同的计算机和Webkit电话浏览器。 在我的旧主机上，所有浏览器上的一切都正常，这是迁移到新服务器的备份副本。

我试图停用大多数所有插件，我试图删除内容类型标题标记。 我试图插入的CSS用于非悬停状态与 变换：旋转（0deg） 和变换：比例（1）

我试图改变图像类来

position: relative !important;
位置和容器类

而不是绝对。

我检查了元素来寻找阻塞鼠标悬停的任何东西。

因为这是来自siteground.com的新主机，与hostgator.com相比，它们有一个很棒的WordPress主机环境，可能它与主机环境有关，所以我有一张解决此问题的机票，并且他们确认问题和检查后他们无法指出问题，他们还指出我没有解决问题的文章。

答

问题在于动画编码。

我没有声明@ -webkit-keyframes rotateA部分，只写了构成它的行。 最近奇怪的是，这在手机和PC上很长一段时间才刚刚停止。

@-webkit-keyframes rotateA { 
35% { 
-webkit-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
-moz-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
-o-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
-ms-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
transform: rotate(0deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
background-color: rgba(0, 0, 0, 0) !important; 
} 
40% { 
-webkit-transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
-moz-transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
-o-transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
-ms-transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
transform: rotate(-30deg) scaleX(1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
background-color: rgba(0, 0, 0, 0) !important; 
} 
50% { 
-webkit-transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
-moz-transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
-o-transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
-ms-transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
transform: rotate(-75deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
background-color: rgba(0, 0, 0, 0) !important; 
} 
55% { 
-webkit-transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
-moz-transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
-o-transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
-ms-transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
transform: rotate(-350deg) scaleX(-1.2) scaleY(1.2) skew(0deg) translate(0px,0px); 
} 
60% { 
-webkit-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
-moz-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
-o-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
-ms-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
background-color: rgba(212, 36, 36, 0.8); 
} 
100% { 
-webkit-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
-moz-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
-o-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
-ms-transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
transform: rotate(-360deg) scaleX(-1.0) scaleY(1.0) skew(0deg) translate(0px,0px); 
background-color: rgba(212, 36, 36, 0.8); 
} 
}

相关推荐