Quisiera saber como hacer para que en safari la animación de esta tabla se vea igual que en Firefox o Chorme. En chrome o firefox el borde aparece desde el centro de la tabla En safari la animación se repite en cada td (no tr)
Codepen: https://codepen.io/charlysole/pen/LLLqMv
tr {
margin: 0 auto;
padding: 2px;
background-color: transparent;
background-repeat: no-repeat;
background-size: 100% 2px,0 0, 100% 100%;
background-position: bottom center, top center, bottom center;
-webkit-animation: drawBorderFromCenter 4s 0s;
animation: drawBorderFromCenter 4s 0s;
background-image: url('http://www.maharam.com/assets/site/swatches/red-8fbb3ee62104ec827fe7ac7b2fc0e5fcdec3376d215c390ff44383c936b869de.gif');
color: black;
}
@-webkit-keyframes drawBorderFromCenter {
from {
background-size: 0 2px, 0 0, 100% 100%;
}
to {
background-size: 100% 2px,0 0, 100% 100%;
}
}
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
moz
. Mira esta respuesta en inglés así como la documentación disponible.