CSS3アニメーションと終了位置を維持

Question

私は以下の内に見ることができるアニメーションを作成しましたFIDDLE。私はスマイリーを回転させるデモで見ることができるように

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); 
    } 
} 

：私は、次のCSSコードやHTMLコードを使用したアニメーションを作成します。私が達成しようとしているのは、スマイリーが最後の位置にとどまっていることです。誰も私はJavascriptを使用せずにこれを解決する方法を知っていますか？

Answer 1

これを追加します。

animation-fill-mode: forwards;