0
我最近迁移了我的网站，并且稍微简单的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主机环境，可能它与主机环境有关，所以我有一张解决此问题的机票，并且他们确认问题和检查后他们无法指出问题，他们还指出我没有解决问题的文章。