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旋转动画

回答

相关问题