使PNG揮杆大多數瀏覽器

Question

我有一個PNG像

<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; 
} 

但它可能無法正常工作？有沒有辦法將swing效果應用到png並在大多數瀏覽器上看到它？

如何應用的效果，I made a jsfiddle

Answer 1

你需要給動畫的持續時間

.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; 
}