Question

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

时

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

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

Answer 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;

}

Answer 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); }    
}

Answer 3

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

如何防止CSS3过渡反转？

3 个答案: