CSS-悬停时过渡闪烁 [英] CSS-transition flickering on hover

问题描述

您能用宝贵的时间阅读我的问题，真是太棒了！

我正尝试在悬停时翻转div。一切都很好，但在过渡期间它会闪烁。它几乎看起来像是翻转了好几次！这会破坏翻转的整个效果。下面是我的代码和一个小提琴：

小提琴：FIDDLE

和CSS：

.rotate {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    padding:20px;
    background-color: #333;
    width: 200px;
    text-align: center;
    margin: 0 auto;
    font-family: sans-serif;
    color: #FFFFFF;
    border-top: #E9F01D 3px solid;
}
.rotate:hover {
    letter-spacing: 5px;
    color: #E9F01D;
    cursor: pointer;
    -ms-transform: rotatex(360deg);
    -webkit-transform: rotatex(360deg);
    transform: rotatex(360deg);
}

这种闪烁效应是否可以预防？如果是，我该怎么做？

提前感谢！

推荐答案

评论中提到：

主要问题是：当您将鼠标悬停在移动(或动画)div上时，您可能只是取消悬停该元素，因为它在您的光标下方移动。

解决方案：将悬停选择器放在悬停时不会改变其大小的包含元素上：

Example Here。

.rotate {
  width: 200px; height:80px;
  background:green;
}

.rotate .rotate-inner {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  
  -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
          transition: all 0.3s;
  
  padding:20px;
  background-color: #333;
  text-align: center;
  margin: 0 auto;
  font-family: sans-serif;
  color: white;
  border-top: #E9F01D 3px solid;
}

.rotate:hover .rotate-inner {
  letter-spacing: 5px;
  color: #E9F01D;
  cursor: pointer;
  
  -webkit-transform: rotatex(360deg);
     -moz-transform: rotatex(360deg);
      -ms-transform: rotatex(360deg);
          transform: rotatex(360deg);
}

<div class="rotate">
    <div class="rotate-inner">HOVER ME</div>
</div>

这篇关于CSS-悬停时过渡闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！