Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of CSS border-spacing Property Animation</title> <style> table, th, td { border: 1px solid orange; } table th, table td { padding: 5px; } .data { border-spacing: 2px; -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */ animation: test 4s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes test { 50% {border-spacing: 15px;} } /* Standard syntax */ @keyframes test { 50% {border-spacing: 15px;} } </style> </head> <body> <p><strong>Warning:</strong> CSS Animations do not work in Internet Explorer 9 and earlier versions.</p> <p><strong>Note:</strong> The spacing between the borders of the following table cells is animating from its initial value "0" to "15px", and back to the initial value "0" again up to infinite times.<p> <table class="data"> <thead> <tr> <th>No.</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John Carter</td> <td>johncarter@mail.com</td> </tr> <tr> <td>2</td> <td>Peter Parker</td> <td>peterparker@mail.com</td> </tr> <tr> <td>3</td> <td>John Rambo</td> <td>johnrambo@mail.com</td> </tr> </tbody> </table> </body> </html>
