Safari错误触发css3动画

我曾尝试在图像加载时和用户悬停时在图像上制作一些小动画，但在Safari方面似乎存在问题

当我悬停“a”标记时，它应该只触发一个“transition animation”，它似乎触发了“loadImg”动画，尽管它之间似乎没有太大的关联。它已经在Chrome、IE、Edge、Firefox和Opera中进行了测试，在那里运行良好

这是我发现与该问题最相关的代码

<div class="playerInfo">
     <div class="avatarName">
       <a href="http://steamcommunity.com/profiles/76561198064550827" target="_blank" title="Click to see Magn0053's profile">
            <img src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/5d/5d8a752dfea20299845bcd57d64ce04125d02d67_full.jpg" alt="Player avatar">
       </a>
       <figcaption class="playerName">Magn0053</figcaption>
    </div>
</div>

我还举了一个例子。

试试这些：

 -webkit-transition: 0.3s linear;
 -webkit-transition: -webkit-transform 0.3s linear;

---

根据经验，在处理过渡时，始终使用“变换比例”，而不是更改宽度和高度。这是因为它将是gpu加速的，而且对于手机来说，它将工作得更好。：）这里有一个快速解决方案

.playerInfo{
宽度：184px；
高度：227px；
利润率：0.5px；
}
.avatarName{
高度：206px；
位置：相对位置；
}
.playerInfo a{
高度：184px；
宽度：184px；
位置：绝对位置；
左：0；
排名：0；
边界半径：10px；
保证金：0；
填充：0；
}
.playerInfo img，
.playerInfo.imgReplacer{
边界半径：10px；
保证金：0；
填充：0；
}
.playerInfo img{
动画：1s loadImg；
-webkit动画：1s loadImg；
-moz动画：1s loadImg；
-o-动画：1s loadImg；
位置：相对位置；
过渡：0.3s线性；
宽度：184px；
高度：184px；
顶部：0px；
左：0px；
}
.playerInfo a:悬停图像{
变换：比例（0.95）；
}
playerName先生{
动画：1s nameFix；
-moz动画：1s nameFix；
-webkit动画：1s nameFix；
-o-动画：1s nameFix；
位置：绝对位置；
底部：0；
}
@关键帧名称修复{
0% {
位置：绝对位置；
底部：0；
}
100% {
底部：0；
位置：绝对位置；
}
}
@关键帧加载img{
0% {
高度：0px；
宽度：0px；
左：50%；
最高：50%；
位置：绝对位置；
}
100% {
高度：184px；
宽度：184px；
左：0；
位置：绝对位置；
排名：0；
}
}

Magn0053

这似乎很好，我会尽量记住一条小规则：）

 -webkit-transition: 0.3s linear;
 -webkit-transition: -webkit-transform 0.3s linear;