3

如何防止 CSS3 过渡反转？例如：当我使用

div
{
-webkit-transition:-webkit-transform 2s;
}
div:hover
{
-webkit-transform:rotate(360deg);
}

每当我将鼠标移出时，它都会向后旋转，如何防止它？所以当我将鼠标放在div上时它只会向前旋转，而当我的鼠标离开div时它不会向后旋转？

4

4 回答 4

9

您可能已经解决了这个问题，但如果您还没有在这里解决您的 360 度滚动的特定问题。

div
{
    -webkit-transition: all 0.0s ;
    -moz-transition: all 0.0s ;
    -o-transition: all 0.0s ;
    transition: all 0.0s;
}

div:hover
    {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);

    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;

}
于 2013-10-03T03:01:01.503 回答
3

您可以改用 CSS 动画并设置将保持结束状态的animation-fill-mode属性。forwards

这是一个快速演示。如您所见，它仅旋转 360 度然后停止（这是您想要的吗？）。如果您希望它在您将鼠标悬停在 上时一直旋转div，那么您可以更改forwards为infinite并将 设置animation-timing-function为linear（以保持一致的速度）。

像这样：

animation: rotate 2s linear infinite;

但是当您将鼠标悬停时它看起来并不好，因为它会破坏动画并且我认为没有解决此问题的方法。我希望这会有所帮助。如果没有，也许如另一个答案中提到的那样，JavaScript 解决方案会更好。

这是演示中的代码。

HTML

<div class="box"></div>

CSS

.box {
    width: 100px;
    height: 100px;
    background: #333;
}

.box:hover {
    -webkit-animation: rotate 2s forwards;
    animation: rotate 2s forwards;
}

@-webkit-keyframes rotate {
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes rotate {   
  100% { transform: rotate(360deg); }    
}
于 2013-07-15T19:52:20.737 回答
0

同样使用 Javascript 时，CSS 动画将向后反转（动画向后旋转的次数与之前向前旋转的次数一样多），例如，如果您通过单击照片库将图像元素旋转了几次，然后尝试关闭它使用可见性：隐藏；

我找到的解决方案是先禁用 CSS 动画，然后再更改元素设置或隐藏元素。这样它就不会反转：

   document.getElementById("picture").style.transition = "none 0s linear";
于 2022-01-06T09:12:38.137 回答
-1

就是这样:hover工作的。它仅在鼠标悬停在元素上时有效。要做一些更永久的事情，你需要 JavaScript。

于 2013-07-15T14:35:27.683 回答