CSS3动画在chrome和firefox中工作，但在safari中不工作

因此，我的css3动画在chrome和firefox中工作，而不是在safari中，我想知道您是否能在我的代码中看到问题所在。我似乎不明白为什么会这样。任何帮助都将不胜感激

.animated { 
-webkit-animation-duration: 1s; 
animation-duration: 1s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-timing-function: ease-in-out; 
animation-timing-function: ease-in-out; 
} 

@-webkit-keyframes bounceIn 
{ 
0% { 
    opacity: 0; 
    -webkit-transform: scale(.3); 
} 

50% { 
    opacity: 1; 
    -webkit-transform: scale(1.05); 
} 

70% { 
    -webkit-transform: scale(.9); 
} 

100% { 
     -webkit-transform: scale(1); 
} 
} 

@keyframes bounceIn 
{ 
     0% { 
    opacity: 1; 
    transform: scale(.3); 
} 

50% { 
    opacity: 1; 
    transform: scale(1.05); 
} 

70% { 
    transform: scale(.9); 
} 

100% { 
    transform: scale(1); 
} 
} 

.bounceIn { 
-webkit-animation-name: bounceIn; 
animation-name: bounceIn; 
}

这是html：

<div id="animated-example" class="animated bounceIn">
    <img style="position:absolute;margin:  auto;
    margin-left:41.5%;top:349px;width: 150px;
    height: 150px;
    border: 2px solid rgba(255, 255, 255, 1);
    cursor: pointer;
    border-radius:50%;
    background-color:rgb(225,225,225);" src="../images/circleHat.gif"/>


        </div>

---

非常感谢，非常感谢您提供的任何帮助

这可能与您正在为此使用两个类的组合有关。也请分享你的HTML的相关部分。当然，没有问题适合我windows 8 safari 5.1.7