Question

我一直无法理解css3轮换的工作原理。我见过很多例子并试图实现我自己的例子，但无济于事。我的目标是让一个链接旋转单个字符I.e.文字＆gt;＆gt; （+）点击。我想要实现的是让动画开始快速加速，然后在几秒或更短的时间内停止。

我不知道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

如何使用Css3旋转单个字符？

1 个答案: