CSS table 具有背景颜色的单元格上的框阴影动画

Question

我正在尝试使用框阴影为 table 的行设置动画。第一列是固定的，背景色为属性。看起来这两件事搞砸了动画。请参阅下面的代码片段和 JsBin。 Whosebug 抱怨我的 post 大部分是代码，但我认为 gif 是自解释的。

tr.pulse-row {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

body {
  padding: 20px
}

td.is-fixed-left {
  background-color: #f9f9f9;  
  z-index: 3;
  position: sticky;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td class="is-fixed-left">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr class="pulse-row">
      <th scope="row">2</th>
      <td class="is-fixed-left">Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td class="is-fixed-left">Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</table>
</body>
</html>

这是JsBin

Answer 1

将 z-index:0 添加到除 .pulse-row 之外的所有行。

tr {
  position:relative;
  z-index:0;
}

tr.pulse-row {
  animation: pulse 1s infinite;
  z-index:1;
}



@keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

body {
  padding: 20px
}

td.is-fixed-left {
  background-color: #f9f9f9;  
  z-index: 3;
  position: sticky;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td class="is-fixed-left">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr class="pulse-row">
      <th scope="row">2</th>
      <td class="is-fixed-left">Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td class="is-fixed-left">Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</table>
</body>
</html>

集成评论中的请求。

我觉得解决不了这个问题，因为一层在上一层在下，背景总是会遮住下面元素的阴影。但是你可以解决这个问题（如果页面背景是纯色，在这种情况下考虑白色）。

使用 alpha background-color 作为固定值 td。

来自：background-color: #f9f9f9;

为此：background-color: #5c5c5c0f;

Here the JSFiddle example.

Answer 2

当您使用 css 动画时，它会创建另一个用于与 z-index 堆叠的上下文。

因此您必须在 class 中添加 position:relative 动画才能正确使用 z-index。

tr.pulse-row {
      animation: pulse 1s infinite;
      position:relative;
      z-index:99;
    }
    
    @keyframes pulse {
      0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
      }
      70% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
      }
      100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
      }
    }
    
    body {
      padding: 20px
    }
    
    td.is-fixed-left {
      background-color: #f9f9f9;  
      z-index: 3;
      position: sticky;
    }

CSS table 具有背景颜色的单元格上的框阴影动画

CSS box shadow animation on table cell with background color

css

animation