html - 使png swing在大多数浏览器上都能正常工作

我有一个像

<img class="swing" src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" />

如何对其应用摇摆效果？

我在goolge中寻找并找到了这段代码

@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -webkit-transform: rotate(15deg); }
    40% { -webkit-transform: rotate(-10deg); }
    60% { -webkit-transform: rotate(5deg); }
    80% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes swing {
    20% { -moz-transform: rotate(15deg); }
    40% { -moz-transform: rotate(-10deg); }
    60% { -moz-transform: rotate(5deg); }
    80% { -moz-transform: rotate(-5deg); }
    100% { -moz-transform: rotate(0deg); }
}

@-o-keyframes swing {
    20% { -o-transform: rotate(15deg); }
    40% { -o-transform: rotate(-10deg); }
    60% { -o-transform: rotate(5deg); }
    80% { -o-transform: rotate(-5deg); }
    100% { -o-transform: rotate(0deg); }
}

@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

.swing {
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    -moz-animation-name: swing;
    -o-animation-name: swing;
    animation-name: swing;
}

但这可能行不通吗？有没有一种方法可以将摆动效果应用于png并在大多数浏览器中看到？

如何应用效果，I made a jsfiddle

最佳答案

您需要给动画一个持续时间

.swing {
   -webkit-transform-origin: top center;
   -moz-transform-origin: top center;
   -o-transform-origin: top center;
   transform-origin: top center;
   -webkit-animation: swing 2s;
   -moz-animation: swing 2s;
   -o-animation: swing 2s;
   animation: swing 2s;
}