CSS动画：跨度旋转

Question

我完全陷入与旋转跨度的这个例子。 http://jsfiddle.net/C94b8/1/。我想要做的是从输入含有缬氨酸旋转旋转，但我不能使之成为可能。也试图改变跨度display: inline-block。没有任何工作。

Answer 1

您需要设置显示器inline-block的。此外，Chrome不支持无​​前缀变换呢。相反，你需要使用-webkit-transform。 Firefox支持的一切，所以你不必担心有。

此外，您不必使用0%和100%。如果这是你使用了，你可以使用from和to。

还有一两件事：我认为这是IE浏览器不支持rotate。他们希望rotateZ。所以，我已经改变了它。

成品？

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

@keyframes spin {
    from {transform: rotateZ(0deg);}
    to {transform: rotateZ(360deg);}
}

header span {        
    display: inline-block;
    /* All the rest of header span {} code goes here. I didn't copy it all. */
}