如何防止 CSS3 过渡反转？答案

【问题标题】：How to prevent CSS3 transitions from reversing back?如何防止 CSS3 过渡反转？
【发布时间】：2022-01-06 17:12:38
【问题描述】：

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

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

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

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

您可能已经解决了这个问题，但如果您还没有解决这个问题，那么您可以在这里解决 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;

}

【讨论】：

这是正确答案。至少在与所问内容的简单性和相关性方面，没有偏向另一种方法。这种方法完全符合要求，通过清除项目不再悬停时（通常会倒回）的过渡时间来消除任何挥之不去的“倒回”过渡效果。

【解决方案2】：

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

这是一个快速的demo。如您所见，它仅旋转 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); }    
}

【讨论】：

【解决方案3】：

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

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

   document.getElementById("picture").style.transition = "none 0s linear";

【讨论】：

【解决方案4】：

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

【讨论】：