Safari错误地触发css3动画

Question

我试图在图片上加载一些小动画，当用户正在徘徊时，但是当涉及到Safari时似乎存在问题。

当我将鼠标悬停在＆＃34; a＆＃34;标签，它应该只触发过渡动画＆＃34;它似乎触发了'＃34; loadImg＆＃34;动画，尽管它似乎并不相互关联。它已在Chrome，IE，Edge，Firefox和Opera中进行了测试，并且可以在那里正常运行。

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

prime

和css

a

我在https://jsfiddle.net/xhjppg93/也有一个例子。

Answer 1

试试这些：

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

Answer 2

根据经验，在处理过渡时，始终使用变换比例而不是更改宽度和高度。这是因为它将加速gpu并且它对移动设备的工作效果会更好。 :)这里有一个快速解决方案。

＆＃13;

＆＃13;

.playerInfo {
  width: 184px;
  height: 227px;
  margin: 0 5px;
}

.avatarName {
  height: 206px;
  position: relative;
}

.playerInfo a {
  height: 184px;
  width: 184px;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 10px;
  margin: 0;
  padding: 0;
}

.playerInfo img,
.playerInfo .imgReplacer {
  border-radius: 10px;
  margin: 0;
  padding: 0;
}

.playerInfo img {
  animation: 1s loadImg;
  -webkit-animation: 1s loadImg;
  -moz-animation: 1s loadImg;
  -o-animation: 1s loadImg;
  position: relative;
  transition: 0.3s linear;
  width: 184px;
  height: 184px;
  top: 0px;
  left: 0px;
}

.playerInfo a:hover img {
  transform: scale(0.95);
}

.playerName {
  animation: 1s nameFix;
  -moz-animation: 1s nameFix;
  -webkit-animation: 1s nameFix;
  -o-animation: 1s nameFix;
  position: absolute;
  bottom: 0;
}

@keyframes nameFix {
  0% {
    position: absolute;
    bottom: 0;
  }
  100% {
    bottom: 0;
    position: absolute;
  }
}

@keyframes loadImg {
  0% {
    height: 0px;
    width: 0px;
    left: 50%;
    top: 50%;
    position: absolute;
  }
  100% {
    height: 184px;
    width: 184px;
    left: 0;
    position: absolute;
    top: 0;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;