問題描述

我創建了這個小提琴來演示這個問題:

I have created this fiddle to demonstrate the problem:

http://jsfiddle.net/NfX56/

動畫 ROTATION 和 HOVER 似乎可以很好地改變方向，但是當我將鼠標懸停在項目上進行轉換時，TOGGLE 是跳躍的，而不是像我想要的那樣平滑地反轉方向.

Animation ROTATION and HOVER seems to work fine for changing direction but the TOGGLE when I hover over the item for transition is jumpy and not a smooth reverse of direction like I would like.

這里是沒有瀏覽器前綴的基本代碼:

Here is the basic code without browser prefix:

@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;
}

我一直在嘗試解決以下問題:

I have been trying to play around with the following:

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

試圖使動畫平滑，使符號平滑地反轉方向，但我似乎不太正確......任何幫助都會很棒！

In an attempt to smooth the animation so that the symbol smoothly reverses direction but I can't quite seem to get it right... any help would be great!

http://jsfiddle.net/NfX56/

推薦答案

我需要考慮很多才能解決您的要求；但我終于找到了解決辦法

I needed to think a lot to solve your request; but I have finally find the solution

相關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 個元素(自旋和陰陽)，我將其中一個設置為向一個方向旋轉，另一個設置為反向旋轉，并且速度更快.當兩者都在運行時，凈效果是向一個方向旋轉；當只有一個旋轉時，凈效果是相反的.

The trick: since you already had 2 elements (spin and yin-yang) I set one of them to rotate in one direction, and the other one to rotate in reverse, and more fast. When both are running, the net effect is to rotate in one direction; when only one is rotating, the net effect is the opposite.

現在，唯一剩下的就是暫停并重新啟動快速旋轉(不是設置重置它！)

Now, the only thing that is left is to pause and restart the fast rotation (not setting reseting it !)

在上面檢測到一個錯誤，.spin:hover 的第四行應該是無前綴的:

Detected one mistake on the above, the fourth line of .spin:hover should be the un-prefixed:

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

修正演示

在 HTML 中添加一個額外的元素我已經能夠使旋轉變化平滑.

Adding an extra element in the HTML I have been able to make the rotation change smooth.

平滑過渡演示

額外的 CSS 是:

.acc {
    transition: all 4s ease-out;
}
.spin:hover .acc {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}

這篇關于平滑的 CSS 過渡動畫旋轉的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！