平滑的 CSS 过渡动画旋转

Posted 2023-03-06

【中文标题】平滑的 CSS 过渡动画旋转

【英文标题】：Smooth CSS Transition Animation Rotation

【发布时间】：2013-08-02 22:37:39

【问题描述】：

我创建了这个小提琴来演示这个问题：

http://jsfiddle.net/NfX56/

动画旋转和悬停似乎可以很好地改变方向，但是当我将鼠标悬停在项目上进行转换时切换是跳跃的，而不是像我想要的那样平滑地反转方向。

这是没有浏览器前缀的基本代码：

@keyframes spin 
    0%  transform: rotate(0deg); 
    100%  transform: rotate(360deg); 

.spin 
    animation: spin 3.5s linear 0s infinite normal;
    width: 100px;
    height: 100px;
    border-radius: 50px 50px 50px 50px;
    overflow: hidden;
    margin-left: -50px;
    margin-top: -50px;
    top: 50%;
    left: 50%;
    position: absolute;

.spin:hover 
    animation: spin 3.5s linear 0s infinite reverse;

我一直在尝试解决以下问题：

transition-property: transform;
transition-duration: 0s;
transition-timing-function: ease-in-out;

试图使动画平滑，以便符号平滑地反转方向，但我似乎不太正确......任何帮助都会很棒！

http://jsfiddle.net/NfX56/

【问题讨论】：

导致 snappong 动作的原因是 0% = 0º 和 100% = 360º。当您在悬停时反转此操作时，它将捕捉到 360º，因为它只是反转关键帧。这就是为什么如果你将鼠标悬停在它上面，你会看到它是平滑的。

我试过 ADDNIG: @keyframes spinreverse 0% transform: rotate(360deg); 100% 变换：旋转（0度）； AND .spin:hover 动画：spinreverse 3.5s 线性 0s 无限正常；现在它跳回到原来的位置...如何获得平滑的反向效果？？？还为 100% 变换尝试了 -360 度，这有点平滑但仍然跳跃了一点

无论上述选项仅允许符号跳回其原始位置，该位置更平滑但不像我想要的那样平滑反转方向......如果这在 CSS 中是不可能的，我会打开一个javascript解决方案....

【参考方案1】：

好吧，这个：

css:

#test 
    margin: 100px;
    height: 200px; width: 200px;
    background: black;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;


#test:hover 
    background: gray;
    -webkit-transform: rotate(1080deg);
    -moz-transform: rotate(1080deg);
    -o-transform: rotate(1080deg);
    -ms-transform: rotate(1080deg);
    transform: rotate(1080deg);

    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;

html:

<div id="test"></div>

DEMO

您遇到的问题是由于过渡缓慢。由于 css 可以有任何逻辑，当您悬停时，榆树将从“0”或“360”或任何您的设置重新开始。所以永远不会顺利，因为 css 无法知道悬停发生之前的最后一个“deg num”是什么......

但是！你可以试试stylus

“Stylus 具有强大的语言内函数定义。”

希望得到帮助：/

【讨论】：

酷，我喜欢你的演示！我认为在从一个静态状态过渡到另一个静态状态时使用过渡是一种更好的方法，似乎使用动画可能无法让对象平滑过渡而不跳回其原始点。我将研究 javascript 函数来处理此功能

【参考方案2】：

我需要考虑很多才能解决您的要求；但我终于找到了解决方案

demo

相关CSS代码：

.spin 
    animation: spin 2s linear 0s infinite reverse;
    -moz-animation: 2s linear 0s reverse none infinite spin;
    -webkit-animation: spin 2s linear 0s infinite reverse;
    -0-animation: spin 2s linear 0s infinite reverse;
    -webkit-animation-play-state: paused;
    -o-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;

.spin:hover 
    -webkit-animation-play-state: running;
    -o-animation-play-state: running;
    -moz-animation-play-state: running;
    -webkit-animation-play-state: running;

.yin-yang 
    animation: spin 4s linear 0s infinite normal;
    -moz-animation: 4s linear 0s normal none infinite spin;
    -webkit-animation: spin 4s linear 0s infinite normal;
    -0-animation: spin 4s linear 0s infinite normal;

诀窍：既然你已经有 2 个元素（自旋和阴阳），我将其中一个设置为向一个方向旋转，另一个设置为反向旋转，而且速度更快。当两者都在运行时，净效果是向一个方向旋转；当只有一个旋转时，净效果是相反的。

现在，唯一剩下的就是暂停并重新开始快速旋转（不是设置重置它！）

在上面检测到一个错误，.spin:hover 的第四行应该是无前缀的：

.spin:hover 
    -webkit-animation-play-state: running;
    -o-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;

corrected demo

在 HTML 中添加一个额外的元素，我已经能够使旋转变化平滑。

smooth transition demo

额外的 CSS 是：

.acc 
    transition: all 4s ease-out;

.spin:hover .acc 
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);

【讨论】：

如果您将动画时间更改为相同（即：2 秒），则动画会冻结在悬停时的位置...有点酷的效果！ css 动画很有趣！！！！感谢您的帮助！

当快速悬停在符号似乎出现故障和跳跃的地方时，chrome 出现了一些故障，可能是因为动画从 360 度开始并在 0 处结束？

抱歉回复晚了，我一直在放假 :-) 我已经更正了 IE 问题，这是一个愚蠢的错误。我没有看到 Chrome 中的故障；可能它取决于其他东西。最让我烦恼的是，它不依赖于从 360 到 0 的变化。

我一直在研究 chrome 中的 glith。还没有发现任何关于它的信息，但在这个过程中我找到了一种方法来平滑地改变旋转速度；查看新的演示。

病了！干得好！