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.



*_*

13 January 2019

Resources for Phaser game makers

Hello.

Just a quick recommendation for those of you who use Phaser for game development. Apart from Phaser home site, there is a Facebook group Phaser Game Makers currently with over 1k members. 



Group is created by William Clarkson, online instructor who published good books and have courses about making games in Phaser. Visit his site for Phaser tutorials. He also offers free Phaser Template for you to start working on your game, check Toolbox / downloads section. Great way to jump start with development.

Thanks, have fun.




 

template by blogger templates