Beating heart CSS animation


After reading more about CSS animations I found this topic very interesting. I have already done some simple css animations and wanted to take a look at other more demanding examples, so I found this great beating heart CSS animation from Codepen (by Elena Voytovich). HTML file has only one line of code:

 <div class="heart"></div>  



Simple CSS Animation example



CSS is used to draw red heart inside div tag using transform rotation and most important setting border-radius to 50%. This is how you get heart curves. I can make small change in the code and set border-radius to 20% and make the heart more squared shape or I can set it to 60% for different look.

  heart shapes drawings using CSS

Animation is done using 3 keyframes on 0, 20% and 40%. Here is the code:


 @keyframes heartbeat  
 {  
  0%  
  {  
   transform: scale( 1 )  
    rotate(-45deg);    
  }  
  20%  
  {  
   transform: scale( 1.25 )  
    rotate(-45deg);   
  }  
   40%  
  {  
   transform: scale( 1.5 )  
    rotate(-45deg);  
  }  
 }  

The heart scale is changing first to 1.25 and than to 1.5 of original size, which makes this animation imitating heartbeat. Nice.

One more thing, class .heart have animation property set like this: animation: heartbeat 1s infinite; which means it will loop infinite number of times (whatever that means) and one iteration of animation lasts for 1 second.






 *_*

Post a Comment

0 Comments