css3 Swing動畫在IE中不起作用

Question

以下CSS3 swing動畫，在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)}
}