如何将动画图标设置为在一段时间后停止

Question

I have the following code to be displayed following an event:

$("span[name|='ttimer'").html("<i class='fa fa-refresh fa-spin fa-5x' aria-hidden='true'></i> ");

How would it be possible to let the spinning motion last for example 3 seconds then stop moving?

Answer 1

Firstly, note your attribute selector is missing the closing ] .

To do what you require you would need to remove the fa-spin class on the element. You can do that using setTimeout() , like this:

var $span = $("span[name|='ttimer']").html('<i class="fa fa-refresh fa-spin fa-5x" aria-hidden="true"></i>');
setTimeout(function() {
  $span.find('.fa-spin').removeClass('fa-spin');
}, 3000);

Answer 2

Maybe you are looking for this, animation-iteration-count

div {
    animation-iteration-count:3;
    -webkit-animation-iteration-count:3; /* Safari and Chrome */
}

this way let you do not have to remove the classname

Answer 3

The animation is caused by fa-spin - you can remove this with a setTimeout:

setTimeout(function() { 
    $("span[name|='ttimer']>i.fa-spin").removeClass("fa-spin");
}, 3000);