css - 如何使用 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();
});

查看完整的工作示例 here