I have created an animation which can be seen within the following FIDDLE. To create the animation I used the following CSS code and 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);
}
}
As can be seen in the demo I rotate the smiley. What I trying to achieve is that the smileys stays at its last position. Does anyone know how I could solve this without using Javascript?
