與動畫中的其他變換混合時出現奇怪的旋轉變換行爲

我正在處理一些基本的CSS動畫，而且我似乎無法弄清楚各種變換的渲染邏輯。如果我執行以下動畫，則按照預期順時針旋轉0到350deg。與動畫中的其他變換混合時出現奇怪的旋轉變換行爲

@keyframes rotate { 
    0% { 
    transform: rotate(0deg); 
    } 
    100% { 
    transform: rotate(350deg); 
    } 
}

然而，當我在其他轉換添加，旋轉開始走捷徑（從0到逆時針350deg）。如果我從0到360deg，這甚至會導致不可見的旋轉。這裏有一個例子：

@keyframes rotate { 
    0% { 
    transform: rotate(0deg); 
    } 
    100% { 
    transform: translate(500px) rotate(350deg); 
    } 
}

中間關鍵幀解決一些問題旋轉，但多個變換使用更當食堂了。

我該如何解決這個問題 - 也就是說，在這個例子中，我如何在不改變旋轉行爲的情況下將旋轉平移添加到旋轉平方（將短逆時針旋轉爲350度而不是像完整的CW旋轉一樣）通常沒有翻譯）？

這裏有一個CodePen一些例子： http://codepen.io/jbjw/pen/gmyajY

來源

2017-04-04 boxtrain

如果不指定rotate(0)的起點，它以動畫符合市場預期。

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: green; 
 
    animation: rotate 3s linear infinite; 
 
} 
 

 
@keyframes rotate { 
 
    100% { 
 
    transform: translate(500px) rotate(350deg); 
 
    } 
 
} 
 

 
body { 
 
    height: 100vh; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<div></div>

或者您可以指定translate(0)起點，預期它會奏效。

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: green; 
 
    animation: rotate 3s linear infinite; 
 
} 
 

 
@keyframes rotate { 
 
    0% { 
 
    transform: translate(0) rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: translate(500px) rotate(350deg); 
 
    } 
 
} 
 

 

 

 
body { 
 
    height: 100vh; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<div></div>

來源

2017-04-04 22:46:27

這工作。任何想法爲什麼？我現在明白了'rotate（0deg）'到'rotate（350deg）'和'no rotation'到'rotate（350deg）'有某種區別 - 看起來像'null'和'undefined'，但我不知道不明白爲什麼差異會帶來改變旋轉行爲的效果（簡化爲350deg）。 – boxtrain

@jbjw不知道爲什麼。我之前已經注意到了這一點，所以我現在只是將它作爲一種練習，以避免錯誤匹配，或者如果我正在從'0'轉換/動畫，則完全關閉初始狀態。如果我將其中一個變形屬性留出過渡/動畫，我離開的變形屬性似乎採用了「阻力最小的路徑」來完成過渡/動畫。這是一個轉換的例子 - 同樣的東西http://codepen.io/anon/pen/MpReWy –

我最好的猜測是，它認爲，在0％，你是在0度。在100％，你在350degrees。這實際上只是你開始的-10度，所以它從一開始就知道它只需旋轉（ - ）10度。您可以通過增加50％，並採取兩個轉換半值解決這個問題： http://codepen.io/anon/pen/PpgNje

@keyframes rotate { 
    0% { 
    transform: rotate(0deg); 
    } 
    50% { 
    transform: translate(250px) rotate(175deg) 
    } 
    100% { 
    /* transform: rotate(350deg); */ 
    transform: translate(500px) rotate(350deg); 
    } 
}

來源

2017-04-04 22:37:37 jas7457

與動畫中的其他變換混合時出現奇怪的旋轉變換行爲

回答

相關問題