【发布时间】：2014-11-16 09:22:06
【问题描述】：
我最近迁移了我的网站，但有些简单的 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 变换：旋转（0度） 和变换：缩放（1）
我尝试将图像类和容器类的位置更改为
position: relative !important;
而不是绝对的。
我检查了元素以寻找任何阻碍鼠标悬停的东西。
因为这是来自 siteground.com 的新主机，与 hostgator.com 相比，他们有一个很棒的共享主机的 wordpress 环境，也许它与主机环境有关，所以我有一张解决这个问题的票，他们确认了问题，检查后无法确定问题，他们还给我指出了一篇没有解决问题的文章。
【问题讨论】：
标签： hover webkit css-animations rotatetransform