border-spacing - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:border-spacing

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. border-spacing

Introduction

In the following code 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.

-webkit- prefix is for Chrome, Safari, Opera.

-moz- prefix is for Firefox.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS border-spacing Property Animation</title>
  <style type="text/css">
table, th, td {
    border: 1px solid red;
}
table th, table td {
    padding: 5px;
}
.data {<!--  w  w w  .  j  a v  a 2  s.  c  o  m-->
    border-spacing: 2px;
    -webkit-animation: test 4s infinite; 
    animation: test 4s infinite;
}


@-webkit-keyframes test {
    50% {border-spacing: 15px;}
}

@keyframes test {
    50% {border-spacing: 15px;}
}
</style>
 </head>
 <body>

  <p> </p>
  <table class="data">
   <thead>
    <tr>
     <th>No.</th>
     <th>Name</th>
     <th>Email</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>1</td>
     <td>Tom</td>
     <td>a@mail.com</td>
    </tr>
    <tr>
     <td>2</td>
     <td>Edith</td>
     <td>b@mail.com</td>
    </tr>
    <tr>
     <td>3</td>
     <td>John Rambo</td>
     <td>johnrambo@mail.com</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

Related Tutorials