Relative Table Cells With CSS3 Animation

Experimenting with undefined behavior.

by Zach Mayer

HTML

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="bouncer light small inline">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
        </div>
      </td>
      <td>Thinger</td>
      <td class="rel">Thinger REL</td>
      <td>Thinger</td>
    </tr>
    <tr>
      <td>
        <div class="bouncer light small inline">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
        </div>
      </td>
      <td class="rel">Thinger REL</td>
      <td>Thinger</td>
      <td>Thinger</td>
    </tr>
    <tr>
      <td>
        <div class="bouncer light small inline">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
        </div>
      </td>
      <td>Thinger</td>
      <td>Thinger</td>
      <td class="rel">Thinger REL</td>
    </tr>
    <tr>
      <td>
        <div class="bouncer light small inline">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
        </div>
      </td>
      <td>Thinger</td>
      <td class="rel">Thinger REL</td>
      <td>Thinger</td>
    </tr>
    <tr>
      <td>
        <div class="bouncer light small inline">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
        </div>
      </td>
      <td class="rel">Thinger REL</td>
      <td>Thinger</td>
      <td>Thinger</td>
    </tr>
    <tr>
      <td>
        <div class="bouncer light small inline">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
        </div>
      </td>
      <td class="rel">Thinger REL</td>
      <td>Thinger</td>
      <td>Thinger</td>
    </tr>
    <tr>
    ...

SCSS

body {
  background-color:#fff;
}

table {
  width:100%;
  border-collapse: collapse;
  th {
    font-weight:bold;
    border:solid 1px #ddd;
  }
  td {
    border-bottom:solid 1px #ddd;
    border-right:solid 1px #ddd;
  }
  td, th {
    padding: 5px;    
    &.rel {
      position:relative;
    }
  }
  tbody {
    tr:nth-child(even) td {
      background-color:#f5f5f5;
    }
    tr:hover {
      background-color:#f1f7fe;
    }
  }
}


/* Change my name to stop the animation. */
.bouncer > div {
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;/* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* No need to mess with this */
.bouncer {
  margin: 0px auto;
  width: 120px;
  text-align: center;
  position: relative;
  top: 50%;
  height: 36px;
  margin-top: -18px;
  &.inline {
    margin-top: -3px !important;
  }
  div {
    width: 36px;
    height: 36px;
    background-color: #333;
    border-radius: 100%;
    display: inline-block;    
  }
  &.small {
    height: 18px;
    margin-top: -9px;
    div {
      width: 18px;
      height: 18px;
    }
  }
  .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }
  .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }
}

@-webkit-keyframes bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes bouncedelay {
  0%,
  80%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  40% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

JavaScript

/*

CASE 1:
With no modifications, run the fiddle and drag the window-sizer of the output to change the width of the output window. Observe the "Thinger REL" cells border behave unpredictably.

CASE 2:
Change the first .bouncer in the scss to something like .bouncer2 to prevent the bouncer from animating. Observe the border problems from above are no longer present.

CASE 3:
Undo any changes made in CASE 2. Comment or remove the &.rel style in the scss (line 13-15) and observe the animation works, and the border problems are no longer present.

*/