Css clip path animation trigger on hover - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Hover

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. Hover

Description

Css clip path animation trigger on hover

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

@keyframes fadeout {<!--from   ww w.  j  a  v  a 2 s.  co  m-->
   0% {opacity: 1}
   100% {opacity: 0}
}
@keyframes load {
   0% {clip-path: polygon(0 0, 25% 0, 12% 100%, 0 100%); opacity: 0.3; }
   60% {clip-path: polygon(0 0, 25% 0, 12% 100%, 0 100%); opacity: 0.3; }
   75% { clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%); opacity: 0.8; }
   100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
}
@keyframes flash {
   0%   {opacity: 0.5;}
   25%    {opacity: 1;}
   75% {opacity: 0.5;}
   100% {opacity: 1;}
}
body,html {
   padding: 0;
   margin: 0;
   background: yellow;
   vertical-align: top;
   text-rendering: auto;
   background-size: cover;
}
#main {
   height:100%;
   width:100%;
}
#tableContainer {
   display: table;
   margin: 0 auto;
   position: relative;
   top: 30%;
}
table {
   transition: 0.3s;
   opacity: 0;
   background-color: rgba(255, 255, 255, 0.35);
   color: white;
   font-size: 20px;
   font-weight: bold;
   letter-spacing: -1px;
   word-spacing: normal;
   border-collapse: separate;
   border-spacing: 30px 30px;
}
#tableContainer:hover table{
   animation: load 0.45s ease-out;
   opacity: 1;
}
th, td {
   padding-left: 10px;
   width: 200px;
   height: 50px;
   border: none;
   text-align: left;
}
.button {
   background-color: rgba(255, 255, 255, 0.2);
   border: none;
   color: #FFFFFF;
   text-align: left;
   font-size: 20px;
   width: 200px;
   transition: all 0.5s;
   cursor: pointer;
}
.button:hover {
   background-color: rgba(255, 255, 255, 0.6);
   animation: flash 0.25s ease-out;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div id="main"> 
   <div id="tableContainer"> 
    <table> 
     <tbody> 
      <tr> 
       <th class="button"> <span>New value</span> </th> 
       <th class="button"> <span>New value</span> </th> 
       <th class="button"> <span>New value</span> </th> 
       <th class="button"> <span>New value</span> </th> 
       <th class="button"> <span>New value</span> </th> 
      </tr> 
      <tr> 
       <th class="button"> <span>New value</span> </th> 
       <th class="button"> <span>New value</span> </th> 
       <th class="button"> <span>New value</span> </th> 
       <th class="button"> <span>New value</span> </th> 
       <th class="button"> <span>New value</span> </th> 
      </tr> 
      <tr> 
       <th class="button"> <span>New value</span> </th> 
       <th class="button"> <span>New value</span> </th> 
       <th class="button"> <span>New value</span> </th> 
       <th class="button"> <span>New value</span> </th> 
       <th class="button"> <span>New value</span> </th> 
      </tr> 
      <tr> 
       <th class="button"> <span>New value</span> </th> 
       <th class="button"> <span>New value</span> </th> 
       <th class="button"> <span>New value</span> </th> 
       <th class="button"> <span>New value</span> </th> 
       <th class="button"> <span>New value</span> </th> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials