爲什麼旋轉（0deg）很重要？

試圖使循環的軌道不斷周圍的50像素的半徑與CSS3動畫：爲什麼旋轉（0deg）很重要？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div { 
 
    width: 10px; 
 
    height: 10px; 
 
    background-color: black; 
 
    position: absolute; 
 
    -webkit-animation-name: example; 
 
    -webkit-animation-duration: 3s; 
 
animation:example 1s infinite linear; 
 
border-radius:50px; 
 
transform-origin:bottom left; 
 
left:50%; 
 
top:50px; 
 
} 
 
@-webkit-keyframes example { 
 
    0% {transform:rotate(0deg) translateX(50px);} 
 
    100% {transform:rotate(360deg) translateX(50px);} 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div></div> 
 

 
</body> 
 
</html>

圓只有旋轉，當我包括旋轉（0deg）我變換在0％關鍵幀。爲什麼是這樣？如果沒有旋轉（0deg）：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div { 
 
    width: 10px; 
 
    height: 10px; 
 
    background-color: black; 
 
    position: absolute; 
 
    -webkit-animation-name: example; /* Chrome, Safari, Opera */ 
 
    -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */ 
 
animation:example 1s infinite linear; 
 
border-radius:50px; 
 
transform-origin:bottom left; 
 
left:50%; 
 
top:50px; 
 
} 
 

 
/* Chrome, Safari, Opera */ 
 
@-webkit-keyframes example { 
 
    0% {transform: translateX(50px);} 
 
    100% {transform:rotate(360deg) translateX(50px);} 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div></div> 
 

 
</body> 
 
</html>

來源

2016-08-10 MrFregg

源和目的地值之間的內插的動畫。默認值通常是'auto'，並且不能被內插。 – mch

請考慮包含'@keyframes'以及'@ -webkit-keyframes'。（你不會在Chrome或Safari上看到不同之處，但是你可能會在Firefox上做...） – Rounin

@Rounin是的。我刪除了它，因爲我想省去「@keyframes」和「@ -webkit-keyframes」複製粘貼的麻煩。因爲我會修改。 – MrFregg

關鍵幀是用來定義哪些參數正在發生變化，從對值。如果沒有定義它，它不被假定爲0，但被假定不是序列的一部分。與此同時，一些瀏覽器可能會以不同的方式對待它。

來源

2016-08-10 15:11:12 xims

應始終定義'from'或'0％'值，如果不是用戶代理將處理它並且不必將其設置爲零。

關鍵幀樣式規則的關鍵幀選擇器由逗號分隔的百分比值列表或關鍵字'from'或'to'組成。選擇器用於指定關鍵幀所代表的動畫持續時間的百分比。關鍵幀本身由選擇器上聲明的屬性值塊指定。關鍵字'from'等於值'0％'。關鍵字'to'相當於值'100％'。請注意百分比單位說明符必須在百分比值上使用。因此，'0'是無效的關鍵幀選擇器。

如果未指定'0％'或'from'關鍵幀，則用戶代理使用計算出的動畫屬性值構造'0％'關鍵幀。如果沒有指定'100％'或'to'關鍵幀，則用戶代理使用計算出的動畫屬性值構造「100％」關鍵幀。如果關鍵幀選擇器指定負百分比值或高於100％的值，則關鍵幀將被忽略。

源：https://www.w3.org/TR/css3-animations/

來源

2016-08-10 15:38:23 Sinandro

爲什麼旋轉（0deg）很重要？

回答

相關問題