CSS3旋转动画 [英] CSS3 Spin Animation

问题描述

我已经审查了很多演示，不知道为什么我不能得到CSS3旋转的功能。我使用的是最新的稳定版Chrome。

I have reviewed quite a few demos and have no idea why I can't get the CSS3 spin to function. I am using the latest stable release of Chrome.

小提琴：
http://jsfiddle.net/9Ryvs/1/

CSS：

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

HTML：

<div></div>

推荐答案

要使用CSS3动画，还必须定义实际动画关键帧（ spin ）

To use CSS3 Animation you must also define the actual animation keyframes (which you named spin)

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

配置动画的时间后，您需要定义动画的外观。这是通过使用 @建立两个或多个关键帧来完成的关键帧 规则。每个关键帧描述动画元素应如何在动画序列中的给定时间呈现。

Once you've configured the animation's timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the @keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.

---

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

---

Demo at 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);}
}

这篇关于CSS3旋转动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！