如何使用Css3旋转单个字符

Question

我一直难以理解css3旋转是如何工作的。我看到了很多例子，并试图暗示我自己的例子，但都无济于事。我的目标是让一个链接旋转一个字符，即点击文本>>(+)。我想实现的是让动画开始得慢得多，速度快得多，然后在几秒钟或更短的时间内停止。

我不知道这在Css3中是否特别可行，如果不可行，我将使用Jquery。然而，我试着把我的头绕在关键帧的事情上。我知道每个浏览器都需要一个工具包，专门用于创建动画和添加属性。之后，我需要设置关键帧和旋转度的规则。但每次我试图编写代码时，我都会遇到错误，几乎就像是语法错误一样。(这里显然有人。)

@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-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);
}
}

我花了将近一个小时来研究特定的代码，没有一个语法错误。如果有人能帮我解决问题，我会很高兴的。

Js Fiddle

这基本上就是我想要的，但我想点击并旋转它。

Answer 1

缩短持续时间以加快速度。

animation-duration: 2000ms;

动画计时功能将在动画结束时为您提供更快的旋转。

animation-timing-function: ease-in;

为了更灵活一点，我将把动画CSS3从div中分离出来，并放入它自己的类中，这样您就可以在初次单击时添加它。

div.spin {    
-webkit-animation-name: spin;
-webkit-animation-duration: 2000ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-moz-animation-name: spin;
-moz-animation-duration: 2000ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-ms-animation-name: spin;
-ms-animation-duration: 2000ms;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
animation-name: spin;
animation-duration: 2000ms;
animation-iteration-count: 1;
animation-timing-function: ease-in;
}

您需要使用javascript在单击时触发动画并重新启动动画。

var $div = $("div");
$div.click(function (e) { 
// restart animation
$(this).addClass("spin");
var el     = $(this),  
newone = el.clone(true);
el.before(newone);
$("." + el.attr("class") + ":last").remove();
});

请参阅此处的完整工作示例