CSS transitions over tables

I am trying to write a html page containing a table and when the mouse is over the table, it should collapse to the table header. This collapse operation should be done with transitions/animations.

I have no idea how to do transitions when I have a table. I couldn't find any example online. Can someone please explain?

Below is my code, but it only creates a table formatted using a style sheet:

<!DOCTYPE html>
<html>

<head>
<style>
table {
    border-collapse: collapse;
    width: 50%;
}
th, td {
    text-align: left;
    padding: 8px;
}
tr:nth-child(even){background-color: #F0F0F0}
th {
    background-color: #FF3366;
    color: white;
}
</style>
</head>

<body>
   <table>
       <tr>
         <th>Firstname</th>
         <th>Lastname</th>
         <th>Savings</th>
       </tr>
       <tr>
        <td>Peter</td>
        <td>Griffin</td>
        <td>$100</td>
       </tr>
       <tr>
        <td>Lois</td>
        <td>Griffin</td>
        <td>$150</td>
      </tr>
      <tr>
        <td>Joe</td>
        <td>Swanson</td>
        <td>$300</td>
     </tr>
     <tr>
       <td>Cleveland</td>
       <td>Brown</td>
       <td>$250</td>
    </tr>
  </table>
</body>

</html>