CSS3旋轉動畫

104

我已經回顧了不少演示，不知道爲什麼我無法獲得CSS3旋轉功能。我正在使用Chrome的最新穩定版本。CSS3旋轉動畫

div { 
 
    margin: 20px; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #f00; 
 
    -webkit-animation-name: spin; 
 
    -webkit-animation-duration: 40000ms; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: linear; 
 
    -moz-animation-name: spin; 
 
    -moz-animation-duration: 40000ms; 
 
    -moz-animation-iteration-count: infinite; 
 
    -moz-animation-timing-function: linear; 
 
    -ms-animation-name: spin; 
 
    -ms-animation-duration: 40000ms; 
 
    -ms-animation-iteration-count: infinite; 
 
    -ms-animation-timing-function: linear; 
 
    -o-transition: rotate(3600deg); 
 
}

<div></div>

來源

2013-02-13 iambriansreed

218

要使用CSS3動畫，你還必須定義實際動畫關鍵幀（你命名spin）

閱讀https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations更多信息

一旦你」已配置動畫的時間，您需要定義動畫的外觀。這是通過使用規則建立兩個或更多個關鍵幀來完成的。每個關鍵幀都描述了動畫元素在動畫序列中的給定時間應如何呈現。

演示在http://jsfiddle.net/gaby/9Ryvs/7/

@-moz-keyframes spin { 
    from { -moz-transform: rotate(0deg); } 
    to { -moz-transform: rotate(360deg); } 
} 
@-webkit-keyframes spin { 
    from { -webkit-transform: rotate(0deg); } 
    to { -webkit-transform: rotate(360deg); } 
} 
@keyframes spin { 
    from {transform:rotate(0deg);} 
    to {transform:rotate(360deg);} 
}

來源

2013-02-13 17:38:07

你得到✓因爲你解釋它最好的，你是囊括了所有的前綴版本唯一的答案。 – iambriansreed 2013-02-13 18:07:30

+22

這是超級挑剔的，但你應該真的讓它動畫到359度。 360度和0度是相同的徑向，所以動畫會暫停一段時間，直到完全轉向。 – 2015-08-19 20:14:48

@AdamGrant謝謝你，今天幾乎讓我頭疼lol – mattslone 2016-05-25 13:11:20

您還沒有指定任何關鍵幀。 I made it work here。

div { 
    margin: 20px; 
    width: 100px; 
    height: 100px;  
    background: #f00; 
    -webkit-animation: spin 4s infinite linear; 
} 

@-webkit-keyframes spin { 
    0% {-webkit-transform: rotate(0deg);} 
    100% {-webkit-transform: rotate(360deg);} 
}

你實際上可以用這個做很多很酷的東西。 Here is one I made earlier。

注：如果您使用-prefix-free，則可以跳過必須寫出所有前綴。

來源

2013-02-13 17:35:20

要旋轉，您可以使用關鍵幀和變換。

div { 
    margin: 20px; 
    width: 100px; 
    height: 100px;  
    background: #f00; 
    -webkit-animation-name: spin; 
    -webkit-animation-duration: 40000ms; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-name: spin; 
    -moz-animation-duration: 40000ms; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
    -ms-animation-name: spin; 
    -ms-animation-duration: 40000ms; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear; 
} 

@-webkit-keyframes spin { 
    from { 
    -webkit-transform:rotate(0deg); 
    } 

    to { 
    -webkit-transform:rotate(360deg); 
    } 
}

Example

來源

2013-02-13 17:37:31

由於最新版的Chrome/FF和IE11沒有必要-MS/-moz/-webkit前綴。這裏有一個更短的代碼（基於以前的答案）：

div { 
    margin: 20px; 
    width: 100px; 
    height: 100px; 
    background: #f00; 

    /* The animation part: */ 
    animation-name: spin; 
    animation-duration: 4000ms; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
} 
@keyframes spin { 
    from {transform:rotate(0deg);} 
    to {transform:rotate(360deg);} 
}

現場演示：http://jsfiddle.net/9Ryvs/3057/

來源

2015-07-30 09:56:58 oriadam

完成的緣故，這裏的薩斯/北斗例子確實縮短了代碼，編譯後的CSS將包括必要的前綴等。

div 
    margin: 20px 
    width: 100px 
    height: 100px  
    background: #f00 
    +animation(spin 40000ms infinite linear) 

+keyframes(spin) 
    from 
    +transform(rotate(0deg)) 
    to 
    +transform(rotate(360deg))

來源

2015-12-03 08:02:07 miphe

HTML與字體真棒圖形。

<span class="fa fa-spinner spin"></span>

CSS

@-moz-keyframes spin { 
    to { -moz-transform: rotate(359deg); } 
} 
@-webkit-keyframes spin { 
    to { -webkit-transform: rotate(359deg); } 
} 
@keyframes spin { 
    to {transform:rotate(359deg);} 
} 

.spin { 
    animation: spin 1000ms linear infinite; 
}

來源

2017-06-05 15:00:58

您還可以獲得我的upvote，用於添加.spin的定義 – 2017-11-15 15:39:52

CSS3旋轉動畫

回答

相關問題