We Keep Coding

Safari is not stopping the CSS3 animation

my target is to animate a loading spinner. After a ajax call is finished the spinner should finish the last rotation but stop than. In FF, Chrome and Opera it is working fine with just adding a class with
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
but in Safari (11.1.2) it is still running.
I think it is just something small to change but I don't find it. My idea is that safari doesn't let me change the animation while running so I can't change.
Code:
function stop()
{
document.getElementById("box").classList.add("stop");
}
CSS:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: animationRotateFrames linear 2s;
animation: animationRotateFrames linear 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
.stop
{
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
}
button
{
margin-top: 40px;
padding: 20px;
}
#-moz-keyframes animationRotateFrames{
0% {
-moz-transform: rotate(0deg) ;
}
100% {
-moz-transform: rotate(359deg) ;
}
}
#-webkit-keyframes animationRotateFrames {
0% {
-webkit-transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(359deg) ;
}
}
#keyframes animationRotateFrames{
0% {
transform: rotate(0deg) ;
}
100% {
transform: rotate(359deg) ;
}
}
HTML
<div id="box"></div>
<button onclick="stop()">Stop</button>
Just as a demo:
JSFiddle

How to play different css animations one after another?

I'm trying to play different css animations one after another but I can't figure out how to.
Basically what I'm trying to do is play one Animation, have it on screen for 15 seconds, then play the next one, show it for 15 seconds and on to the next one and when the last one has been played, it should start again from the top.
Here's an example of the first one it should play, show for 15 seconds and then move on to the next one and do the same.
<style> #animated-example {
width: 300px;
height: 200px;
border: solid 1px #1A7404;
position: absolute;
background-color: #62A80A;
}
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
</style>
<img id="animated-example" class="animated bounceInLeft" src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">
And then run another one, show it for 15 seconds and move on.
<style> #animated-example {
width: 300px;
height: 200px;
border: solid 1px #1A7404;
position: absolute;
background-color: #62A80A;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
</style>
<img id="animated-example" class="animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg">

The only way to achieve that in pure CSS is to run all the animations at the same time and do some calculations:
the length of each animation should be the same and equal to the total length of desired animations (meaning if you want two 15-second animations, the CSS animations should be set to length of 30 seconds, no delays)
to control the start/end point of each animation, you need to modify the percentages accordingly - in the above case, it means that the first animation ends at 50% and that's when the second animation starts. Also, all in-between values need to be interpolated. It's easy for two animations, but you might need to use a calculator as the total number of animations increases. This is if we don't take the delays into account - the numbers change when we have a 15-second animation that will finish animation after 5 seconds, which now equals 33%, etc...
It will be more clear once you see it in action here:
.animated-example {
width: 300px;
height: 200px;
border: solid 1px #1A7404;
position: absolute;
background-color: #62A80A;
}
.animated {
animation-duration: 20s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
6% {
opacity: 1;
transform: translateX(30px);
}
8% {
transform: translateX(-10px);
}
10% {
transform: translateX(0);
}
40% {
opacity: 1;
transform: translateX(0);
}
42% {
opacity: 1;
transform: translateX(30px);
}
55% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
#keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
50% {
opacity: 0;
transform: translateY(-2000px);
}
56% {
opacity: 1;
transform: translateY(30px);
}
58% {
transform: translateY(-10px);
}
60% {
transform: translateY(0);
}
90% {
transform: translateY(0);
}
92% {
opacity: 1;
transform: translateY(30px);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
<img class="animated-example animated bounceInLeft" src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">
<img class="animated-example animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg">

Using animation-delay.
animation: a, b;
animation-duration: 2s, 2s;
animation-delay: 0s, 4s;
The animation b will start after 4s while animation a will start without any delay.

animation-delay would do exactly what you're looking for except for the fact that you want the animations to repeat after the last one has been completed; unfortunately there is (currently) no way to specify a delay between iterations of a looping animation.
You could, however, achieve what you're looking to do using a little bit of JavaScript, like the following. To add more animations, simply add their class names to the animations array at the start of the code.
var animations=["bounceInLeft","bounceInDown"],
count=animations.length,
classlist=document.querySelector("img").classList,
holder=document.createElement("div"),
style=window.getComputedStyle(holder),
delay=15,
current,wait,x;
holder.style.display="none";
document.body.appendChild(holder);
animate();
function animate(){
wait=0;
x=0;
while(x<count){
setTimeout(function(a){
classlist.remove(current);
classlist.add(a);
current=a;
},wait*1000,animations[x]);
holder.className=animations[x];
wait+=delay+parseInt(style.getPropertyValue("animation-duration"));
x++;
}
setTimeout(animate,wait*1000);
};
img{
animation-fill-mode:both;
height:200px;
width:300px;
}
.bounceInDown{
animation-duration:1s;
animation-name:bounceInDown;
}
.bounceInLeft{
animation-duration:2s;
animation-name:bounceInLeft;
}
#keyframes bounceInDown{
0%{
opacity:0;
transform:translateY(-2000px);
}
60%{
opacity:1;
transform:translateY(30px);
}
80%{
transform:translateY(-10px);
}
100%{
transform:translateY(0);
}
}
#keyframes bounceInLeft{
0%{
opacity:0;
transform:translateX(-2000px);
}
60%{
opacity:1;
transform:translateX(30px);
}
80%{
transform:translateX(-10px);
}
100%{
transform:translateX(0);
}
}
<img src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">

I have managed to achieve something similar by adapting this concept by Noah Addy: http://digitalfio.github.io/Stagger.css/
You will need to work on the timings a bit to get the 15sec delay you want, but other than that it should be fairly straightforward.

Javascript Event Listner Issue

The console in the Chrome developer tools shows no errors, the div loads, but the animation play state remains paused - what am I doing wrong?
document.getElementById("design").addEventListener("webkitAnimationEnd", animation);
function animation(){
"use strict";
document.getElementById("profile").classList.add("animation");
location.href = "#profile";
}
CSS
#design {
position: relative;
-webkit-animation: mixdesign;
-webkit-animation-play-state: running;
-webkit-animation-duration: 30s;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
z-index: 8;
}
/* Profile */
#profile {
position: relative;
-webkit-animation: profile;
-webkit-animation-duration: 30s;
-webkit-animation-play-state: paused;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
.animation { -webkit-animation-play-state: running; }

As you were assigning class once transition ends, the existing class css property that takes priority over.
You can make it override them using the !important keyword.
Fiddle here
document.getElementById("design").addEventListener("webkitAnimationEnd", animation);
function animation() {
"use strict";
document.getElementById("profile").classList.add("animation");
}
#design {
position: relative;
-webkit-animation: design;
-webkit-animation-play-state: running;
-webkit-animation-duration: 3s;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
z-index: 8;
}
/* Profile */
#profile {
position: relative;
-webkit-animation: profile;
-webkit-animation-duration: 3s;
-webkit-animation-play-state: paused;
-webkit-transition-timing-function: all ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
.animation {
-webkit-animation-play-state: running!important;
}
#-webkit-keyframes design {
10%, 90% {
-webkit-opacity: 1;
}
0%,
100% {
-webkit-opacity: 0;
}
}
/* Profile: (Animation) */
#-webkit-keyframes profile {
10%, 90% {
-webkit-opacity: 1;
}
0%,
100% {
-webkit-opacity: 0;
}
}
<div id="design">Design</div>
<div id="profile">profile</div>

how to make cb slideshow stop after complete 1 loop which have 6 slider images

I have cb-slideshow by using html and css
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3></h3></div></li>
<li><span>Image 02</span><div><h3></h3></div></li>
<li><span>Image 03</span><div><h3></h3></div></li>
<li><span>Image 04</span><div><h3></h3></div></li>
<li><span>Image 05</span><div><h3></h3></div></li>
<li><span>Image 06</span><div><h3></h3></div></li>
</ul>
But I want stop slides after 1 loop , that mean after complete 1 cycle with all the images.
the css codes are below
.cb-slideshow,
.cb-slideshow:after {
position: absolute;
width: 100%;
height: 484px;
top: 0px;
left: 0px;
z-index: 0;
overflow: hidden;
}
.cb-slideshow:after {
content: '';
background: transparent url(images/pattern.png) repeat top left;
overflow: hidden;
}
.cb-slideshow li span {
width: 100%;
height: 484px;
position: absolute;
top: 15px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(169,3,41, 0.8);/** OW_Control type:color, key:slidertextColor, section:2. Colors, label: - header slider Text color **/
padding-bottom: 20px;
cursor: crosshair;
}
.cb-slideshow li:nth-child(1) span { background-image: url(images/6.jpg);/** OW_Control type:image, key:slideImage6, section: 0. Header Slides, label: Slide 6 **/ }
.cb-slideshow li:nth-child(2) span {
background-image: url(images/5.jpg);/** OW_Control type:image, key:slideImage5, section: 0. Header Slides, label: Slide 5 **/
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(images/4.jpg);/** OW_Control type:image, key:slideImage4, section: 0. Header Slides, label: Slide 4 **/
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(images/3.jpg);/** OW_Control type:image, key:slideImage3, section: 0. Header Slides, label: Slide 3 **/
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(images/2.jpg);/** OW_Control type:image, key:slideImage2, section: 0. Header Slides, label: Slide 2 **/
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(images/1.jpg);/** OW_Control type:image, key:slideImage1, section: 0. Header Slides, label: Slide 1 **/
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
#-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(200px);
}
8% {
opacity: 1;
-webkit-transform: translateX(0px);
}
17% {
opacity: 1;
-webkit-transform: translateX(0px);
}
19% {
opacity: 0;
-webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateX(200px);
}
8% {
opacity: 1;
-moz-transform: translateX(0px);
}
17% {
opacity: 1;
-moz-transform: translateX(0px);
}
19% {
opacity: 0;
-moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateX(200px);
}
8% {
opacity: 1;
-o-transform: translateX(0px);
}
17% {
opacity: 1;
-o-transform: translateX(0px);
}
19% {
opacity: 0;
-o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateX(200px);
}
8% {
opacity: 1;
-ms-transform: translateX(0px);
}
17% {
opacity: 1;
-ms-transform: translateX(0px);
}
19% {
opacity: 0;
-ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
#media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
#media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}

Right now in the CSS you are setting the animation-iteration-count to infinite, so the animation is looping all the time. If you want the animation to stop the slides after one loop only, then set the value of animation-iteration-count to 1.
You would just need to change these two rules and that should do it:
.cb-slideshow li span {
width: 100%;
height: 484px;
position: absolute;
top: 15px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear 1 0s;
-moz-animation: imageAnimation 36s linear 1 0s;
-o-animation: imageAnimation 36s linear 1 0s;
-ms-animation: imageAnimation 36s linear 1 0s;
animation: imageAnimation 36s linear 1 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear 1 0s;
-moz-animation: titleAnimation 36s linear 1 0s;
-o-animation: titleAnimation 36s linear 1 0s;
-ms-animation: titleAnimation 36s linear 1 0s;
animation: titleAnimation 36s linear 1 0s;
}

CSS3 animation not working IE9

I want to create JSFiddle for animation. My animation not supported in IE9. Any suggestion.
http://jsfiddle.net/fJxsV/
HTML
<html>
<head>
<link rel="stylesheet" href="style2.css" media="screen" />
</head>
<body>
<div id="container">
<div id="button">Hover here!</div>
<div id="globe_small"></div>
<div id="globe_large"></div>
<div id="globe_hands"></div>
<div id="globe_background"></div>
</div>
</body>
</html>
#container{position:relative;width:500px;}
#button {position:absolute;width:300px;background-color:pink;top:420px;z-index:5; margin:0 auto;text-align:center;padding-top:15px; padding-bottom:15px;color:#fff; text-transform:uppercase;font-weight:bold;left:90px;}
#globe_background{background:red;width:494px;height:397px;z-index:1;position:absolute; top:0;}
#globe_hands{background:blue;width:295px;height:129px;z-index:3;top:265px; left:96px;position:absolute;}
#globe_small {background:green;height:160px;width:160px;position:absolute; left:165px;top:185px;z-index:4;-webkit-transition-duration: 0.8s;-moz-transition-duration: 0.8s; -o-transition-duration: 0.8s;transition-duration: 0.8s;-ms-transition-duration: 0.8s; -webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform; transition-property: -o-transform;transition-property: transform;-ms-transition-property: transform;
}
#button:hover ~ #globe_large{
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-moz-animation-name: mozspin;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration: 1s;
-o-animation-name: ospin;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
-o-animation-duration: 1s;
-ms-animation-name: msspin;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-ms-animation-duration: 1s;
animation-name: nospin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 1s;
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes mozspin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes ospin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes nospin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes msspin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
http://jsfiddle.net/fJxsV/

Try using -ms-transform in addition to your other rules, see below...
...be aware that -ms-transform is the only form of this property that is
recognized by Windows Internet Explorer 9..
http://msdn.microsoft.com/en-us/library/ie/jj127312%28v=vs.85%29.aspx