Question

所以我的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>

非常感谢，任何帮助都是非常明确的

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

0 个答案: