<style>
table {
  width:100%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;width:30%;
  text-align: left;
}
table.names tr:nth-child(even) {
  background-color: #eee;
}
table.names tr:nth-child(odd) {
  background-color:#fff;
}
table.names th {
  background-color: black;
  height:10px; padding: 0px;
  color: white
  
}
.names td:hover {
  background-color:#FFAAAA;
  color:red
}


div.text3 {
position:absolute;
  width: 300px;
  height: 0px;
  background-color: red;
 animation: myfirst 0s linear 1s infinite alternate;
}

@keyframes myfirst {	0%  {background-color:yellow;left:100%; top:0px;width:100%;}   100%   {background-color:red; left:0%; top:0px;width:100%;}}
@keyframes myfirst2 {0%  {background-color:yellow; left:0%; top:0px;width:100%;}   100%   {background-color:red;left:-100%; top:0px;width:100%;}}
@keyframes mypre {	0%  {background-color:yellow; left:-100%; top:0px;width:100%;}   100%   {background-color:red; left:0%; top:0px;width:100%;}}
@keyframes mypre2 {0%  {background-color:yellow; left:0%; top:0px;width:100%;}   100%   {background-color:red; left:100%; top:0px;width:100%;}}

@keyframes myfade {	0%  {background-color:yellow; top:0px;opacity:0;}   100%   {background-color:red;  top:0px;opacity:1;}}
@keyframes myfade2 {0%  {background-color:yellow; top:0px;opacity:1;}   100%   {background-color:red;  top:0px;opacity:0;}}


</style>
