/* 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. */
<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> <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> </tbody> </table>
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); } }