CSS3 Animation und Endposition beibehalten

Question

Ich habe eine Animation erstellt, die im folgenden FIDDLE zu sehen ist. So erstellen Sie die Animation verwendete ich den folgenden CSS-Code und HTML-Code:

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

Wie in der Demo zu sehen ich den Smiley drehen. Was ich versuche zu erreichen ist, dass der Smileys auf seiner letzten Position bleibt. Weiß jemand wie ich das ohne Javascript lösen könnte?

Answer 1

Fügen Sie diese:

animation-fill-mode: forwards;