Question

我正试图让这个css在Webkit中顺利盘旋。它在Firefox，甚至IE中运行良好。但在Chrome和Safari中，它的行为非常滞后。

.ark-kutucuk:hover {
z-index: 10;
width: 50%;
}

.ark-kutucuk {
 position: relative;
 width: 25%;
 height: 100%;
 float: left;
 text-align: center;
 background-position: top;
 background-size: cover;
}

.ark-kutucuk:hover > [class|="nov"] {
opacity: 1;
transform: rotate(360deg);
max-width: 100%;
}

.ark-kutucuk:hover > [class="ark-yazı-kutu"] {
opacity: 0;
}

最好的问候

编辑：网站http://mindlessranger.byethost22.com/我现在正在“测试版”，因为byethost

Answer 1

首先，删除

transition-delay: 500ms
transition-duration: 500ms;

然后添加

transition: all 0.5s ease-in-out;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

说明：删除其他样式，使用一行声明，然后使用硬件加速（translate3d部分）使动画运行更顺畅。您可以根据需要调整值

CSS：Webkit，Chrome上的Bad Hover性能

1 个答案: