css3擺動動畫在IE中不起作用

Question

以下CSS3擺動動畫在IE中不起作用。

有什麼我可以做的這項工作？

.image{ 
    -moz-animation: 3s ease 0s normal none infinite swing; 
    -moz-transform-origin: 50% 36%; 
    -webkit-animation:swing 3s infinite ease-in-out; 
    -webkit-transform-origin: 50% 36%; 
} 

@-moz-keyframes swing{ 
    0%{-moz-transform:rotate(-3deg)} 
    50%{-moz-transform:rotate(3deg)} 
    100%{-moz-transform:rotate(-3deg)} 
} 

@-webkit-keyframes swing{ 
    0%{-webkit-transform:rotate(-3deg)} 
    50%{-webkit-transform:rotate(3deg)} 
    100%{-webkit-transform:rotate(-3deg)} 
} 

實時預覽：FIDDLE

Answer 1

請試試這個版本，完成所有供應商前綴：

.image { 
    -webkit-animation: 3s ease 0s normal none infinite swing; 
    -moz-animation: 3s ease 0s normal none infinite swing; 
    -ms-animation: 3s ease 0s normal none infinite swing; 
    -o-animation: 3s ease 0s normal none infinite swing; 
    animation: 3s ease 0s normal none infinite swing; 

    -webkit-transform-origin: 50% 36%; 
    -moz-transform-origin: 50% 36%; 
    -o-transform-origin: 50% 36%; 
    -ms-transform-origin: 50% 36%; 
    transform-origin: 50% 36%; 
} 

@keyframes swing { 
0% { 
    -webkit-transform: rotate(-3deg); 
    -moz-transform: rotate(-3deg); 
    -o-transform: rotate(-3deg); 
    -ms-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 
50% { 
    -webkit-transform: rotate(3deg); 
    -moz-transform: rotate(3deg); 
    -o-transform: rotate(3deg); 
    -ms-transform: rotate(3deg); 
    transform: rotate(3deg); 
} 
100% { 
    -webkit-transform: rotate(-3deg); 
    -moz-transform: rotate(-3deg); 
    -o-transform: rotate(-3deg); 
    -ms-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 

} 

@-moz-keyframes swing { 
0% { 
    -moz-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 
50% { 
    -moz-transform: rotate(3deg); 
    transform: rotate(3deg); 
} 
100% { 
    -moz-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 

} 

@-webkit-keyframes swing { 
0% { 
    -webkit-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 
50% { 
    -webkit-transform: rotate(3deg); 
    transform: rotate(3deg); 
} 
100% { 
    -webkit-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 

} 

@-ms-keyframes swing { 
0% { 
    -ms-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 
50% { 
    -ms-transform: rotate(3deg); 
    transform: rotate(3deg); 
} 
100% { 
    -ms-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 

} 

@-o-keyframes swing { 
0% { 
    -o-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 
50% { 
    -o-transform: rotate(3deg); 
    transform: rotate(3deg); 
} 
100% { 
    -o-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 

} 

Answer 2

什麼版本的IE？版本10或更高版本支持CSS3動畫。 http://caniuse.com/css-animation

編輯： 你錯過了非供應商的特定聲明

.image{ 
    animation: 3s ease 0s normal none infinite swing; 
    transform-origin: 50% 36%; 
} 

@keyframes swing{ 
    0%{transform:rotate(-3deg)} 
    50%{transform:rotate(3deg)} 
    100%{transform:rotate(-3deg)} 
}