html - CSS3 动画并保持结束位置

<分区>

我创建了一个动画，可以在下面的 FIDDLE 中看到.为了创建动画，我使用了以下 CSS 代码和 HTML 代码:

HTML

<div>
  <h2>
    Welcome
    <span>:)</span>
  </h2>
 </div>

CSS

*{
  font-size:28px;
  margin:20px;
}
div span{
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: spin;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-name: spin;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease-in-out;

    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;    
    display:inline-block;
}
@-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(90deg);
    }
}

从演示中可以看出，我旋转了笑脸。我想要实现的是笑脸保持在最后一个位置。有谁知道我如何在不使用 Javascript 的情况下解决这个问题？

最佳答案

添加这个: