Safari falsely triggering css3 animation - css

Question

I've tried to make some minor animations on an image, while it's loading, and when a user is hovering it, but there seems to be an issue when it comes to Safari.
When I hover the "a" tag, which should just trigger a "transition animation" it seems trigger the "loadImg" animation, even though it doesn't seem to be very related to each other. It's tested in Chrome, IE, Edge, Firefox and Opera, and it works fine there.
This the the code I find the most relevant to the issue.
<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>
and the css
.playerInfo img {
-webkit-animation: 1s loadImg;
position: relative;
transition: 0.3s linear;
width: 184px;
height: 184px;
top: 0px;
left: 0px;
}
.playerInfo a:hover img{
height:175px;
width:175px;
left:4.5px;
top:4.5px;
position: absolute;
}
I also have an example at https://jsfiddle.net/xhjppg93/.

Answer 1

As a rule of thumb, always use transform scale instead of changing width and height when dealing with transitions. This is because it will be gpu accelerated and it'll work a lot better for mobiles. :) Here's a quick fix for you.
.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;
}
}
<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>

Answer 2

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