Question

我想知道怎么做，在Safari中，这个表的动画看起来像在Firefox或Chorme中。在chrome或firefox中，边缘从表格的中心出现在safari中，动画在每个th（而不是tr）中重复

比较在每个更加broser上打开此链接（safari和firefox） Codepen：https://codepen.io/charlysole/pen/LLLqMv

HTML

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

CSS

    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%;
    }
 }

在safari中，线条是从桌子的每个单元格的中心绘制的，而在firefox中，其他线条从整个行的中心绘制线条（这是预期的方式）

不同的css动画取决于浏览器safari或firefox

0 个答案: