html - 使 png swing 在大多数浏览器上工作

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

但它可能不起作用？有没有办法将摆动效果应用于 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;
}