19 February 2019

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>  
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. 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. *_*

13 February 2019

Simple CSS Animation


You don't need Flash or JavaScript anymore to create animations for your page. CSS is quite capable of doing animations too.

The secret is in @keyframes CSS rule. With this rule you can change style from one state to another over some time period.

Let's jump to simple example and use DIV element to bind animation to it. We will change position of this DIV element.

 
<!DOCTYPE html>  
 <html>  
 <head>  
 <style>   
 div {  
  width: 200px;  
  height: 50px;  
  background-color: blue;  
  position: relative;  
  animation-name: example;  
  animation-duration: 5s;  
 }  
 @keyframes example {  
  0%  {left:0px; top:0px;}  
  100% {left:300px; top:0px;}  
 }  
 </style>  
 </head>  
 <body>  
 <div></div>  
 </body>  
 </html>  


Next, you are not limited to position, you can change other properties too. So, let's change background color also.

 
<!DOCTYPE html>  
 <html>  
 <head>  
 <style>   
 div {  
  width: 200px;  
  height: 50px;  
  background-color: blue;  
  position: relative;  
  animation-name: example;  
  animation-duration: 5s;  
 }  
 @keyframes example {  
  0%  {background-color:blue; left:0px; top:0px;}  
  100% {background-color:green; left:300px; top:0px;}  
 }  
 </style>  
 </head>  
 <body>  
 <div></div>  
 </body>  
 </html>  


There it is. Very simple CSS animation example, easy too understand. However, this will not work in IE or Safari. Next time more on that.

*_*

Pure CSS Rain effect

Some time ago there was on this blog tutorial about how to make rain effect on your website. That was 11 years ago! It was different time when dinosaurs Flash ruled the web and Humans HTML5 was still distant future.

Today it is possible to do the same thing using pure CSS.

Here is how. Click on Run Pen.



*_*

 

template by blogger templates