css3 定义的动画效果，IE和其他浏览器显示不一致

Question

.magic {
animation: magic 1s linear;
animation-fill-mode: forwards;
}

@keyframes magic {
0% {
opacity: 1;
transform-origin: 50% 0;
transform: scale(1, 1);
}

50% {
opacity: 0.5;
transform-origin: 50% 0;
transform: translate(275px, -60px) scale(0.5, 0.5);
}

100% {
opacity: 0;
transform-origin: 50% 0;
transform: translate(550px, -120px) scale(0, 0);
}
}

Answer 1

需要加入厂商前缀提高代码兼容性，例：
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: /
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/ Safari 和 Chrome: /
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/ Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}