CSS关键帧悬停动画在Chrome中不起作用

Question

我最近迁移了我的网站，有些简单的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） 和变换：scale（1）

我尝试将图像类和容器类的位置更改为

position: relative  !important;

而不是绝对。

我检查了元素以查找阻止鼠标悬停的任何内容。

因为这是来自siteground.com的新主机，所以与hostgator.com相比，他们有一个很好的wordpress环境用于共享主机，也许它与主机环境有关，所以我有一个解决了这个问题的票，他们确认了问题，在检查后他们无法确定问题，他们还指出了一篇文章没有解决问题。

Answer 1

问题在于动画编码。

我没有声明@ -webkit-keyframes rotateA部分，只写了构成它的行。 什么是奇怪的是这种手机和个人电脑很长一段时间，最近就停止了。

@-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);
}
}