A Simple Animation of Microsoft New Logo in CSS3

Introduction

 
CSS3 animation has a property called @keyframes. When we specify anything in the @keyframes the animation will be started and it changes the style of the object from the current style to the new style. To use this animation we define the two properties: name of the animation and duration of the animation. 
 
For Ex
  1. #div2  
  2. {  
  3.     animation:mythird 2s;  
  4.     -webkit-animation:mythird 2s; /* For Google Chrome and Safari */  
  5.     -moz-animation:mythird 2s; /* For Mozilla Firefox */  
  6.     -o-animation:mythird 2s; /* Opera */  
Here mythird is the name of the animation and 2s is the time duration.
 
Note: Internet Explorer does not support this property.
 
Now we create the logo for this, follow these steps.
 
Step 1
 
First we create four <div> tags like this:
  1. <table>  
  2.     <tr>  
  3.         <td>  
  4.             <div>  
  5.             </div>  
  6.         </td>  
  7.         <td>  
  8.             <div id="div1">  
  9.             </div>  
  10.         </td>  
  11.     </tr>  
  12.     <tr>  
  13.         <td>  
  14.             <div id="div2">  
  15.             </div>  
  16.         </td>  
  17.         <td>  
  18.             <div id="div3">  
  19.             </div>  
  20.         </td>  
  21.     </tr>  
  22. </table> 
Step 2
 
After that we write the following code in the <style> tag:
  1. <style type="text/css">    
  2. div    
  3. {    
  4.     width:50px;    
  5.     height:50px;    
  6.     background:red;    
  7.     position:relative;    
  8.     animation:mydivfirst 2s;    
  9.     -webkit-animation:mydivfirst 2s; /* For Google Chrome and Safari */    
  10.     -moz-animation:mydivfirst 2s; /* For Mozilla Firefox */    
  11.     -o-animation:mydivfirst 2s; /* Opera */    
  12. }    
  13. #div1    
  14. {    
  15.     width:50px;    
  16.     height:50px;    
  17.     background:green;    
  18.     position:relative;    
  19.     animation:mysecond 2s;    
  20.     -moz-animation:mysecond 2s; /* For Mozilla Firefox */    
  21.     -webkit-animation:mysecond 2s; /* For Google Chrome and Safari */    
  22.     -o-animation:mysecond 2s; /* Opera */    
  23. }    
  24. #div2    
  25. {    
  26.     width:50px;    
  27.     height:50px;    
  28.     background:blue;    
  29.     position:relative;    
  30.     animation:mythird 2s;    
  31.     -webkit-animation:mythird 2s; /* For Google Chrome and Safari */    
  32.     -moz-animation:mythird 2s; /* For Mozilla Firefox */    
  33.     -o-animation:mythird 2s; /* Opera */    
  34. }    
  35. #div3    
  36. {    
  37.     width:50px;    
  38.     height:50px;    
  39.     background:orange;    
  40.     position:relative;    
  41.     animation:myforth 2s;    
  42.     -webkit-animation:myforth 2s; /* For Google Chrome and Safari */    
  43.     -o-animation:myforth 2s; /* Opera */    
  44.     -moz-animation:myforth 2s; /* For Mozilla Firefox */    
  45. }    
  46. @keyframes mydivfirst    
  47. {    
  48.     0% {background:red; left:0px; top:0px;}    
  49.     25% {background:pink; left:300px; top:0px;}    
  50.     50% {background:blue; left:300px; top:300px;}    
  51.     75% {background:green; left:0px; top:300px;}    
  52.     100% {background:blue; left:0px; top:0px;}    
  53. }     
  54. @-moz-keyframes mydivfirst /* For Firefox */    
  55. {    
  56.     0% {background:red; left:0px; top:0px;}    
  57.     25% {background:yellow; left:300px; top:0px;}    
  58.     50% {background:blue; left:300px; top:300px;}    
  59.     75% {background:green; left:0px; top:300px;}    
  60.     100% {background:red; left:0px; top:0px;}    
  61. }    
  62. @-webkit-keyframes mydivfirst /* For Google Chrome and Safari */    
  63. {    
  64.     0% {background:red; left:0px; top:300px;}    
  65.     35% {background:pink; left:300px; top:0px;}    
  66.     50% {background:blue; left:0px; top:300px;}    
  67.     75% {background:green; left:0px; top:0px;}    
  68.     100% {background:blue; left:300px; top:0px;}    
  69. }      
  70. @keyframes mysecond    
  71. {    
  72.     0% {background:blue; left:300px; top:0px;}    
  73.     35% {background:pink; left:0px; top:300px;}    
  74.     50% {background:brown; left:300px; top:300px;}    
  75.     75% {background:green; left:0px; top:0px;}    
  76.     100% {background:blue; left:300px; top:0px;}    
  77. }     
  78. @-moz-keyframes mysecond    
  79. {    
  80.     0% {background:blue; left:300px; top:0px;}    
  81.     35% {background:pink; left:0px; top:300px;}    
  82.     50% {background:brown; left:300px; top:300px;}    
  83.     75% {background:green; left:0px; top:0px;}    
  84.     100% {background:blue; left:300px; top:0px;}    
  85. }    
  86. @-webkit-keyframes mysecond /* For Google Chrome and Safari */    
  87. {    
  88.     0% {background:blue; left:300px; top:0px;}    
  89.     35% {background:pink; left:0px; top:300px;}    
  90.     50% {background:brown; left:300px; top:300px;}    
  91.     75% {background:green; left:0px; top:0px;}    
  92.     100% {background:blue; left:300px; top:0px;}    
  93. }    
  94. @keyframes mythird    
  95. {    
  96.     0% {background:blue; left:0px; top:0px;}    
  97.     35% {background:pink; left:300px; top:0px;}    
  98.     50% {background:purple; left:0px; top:300px;}    
  99.     75% {background:green; left:300px; top:0px;}    
  100.     100% {background:blue; left:300px; top:0px;}    
  101. }    
  102. @-moz-keyframes mythird    
  103.  {    
  104.     0% {background:blue; left:0px; top:0px;}    
  105.     35% {background:pink; left:300px; top:0px;}    
  106.     50% {background:purple; left:0px; top:300px;}    
  107.     75% {background:green; left:300px; top:0px;}    
  108.     100% {background:blue; left:300px; top:0px;}    
  109. }      
  110. @-webkit-keyframes mythird /* For Google Chrome and Safari */    
  111. {    
  112.     0% {background:blue; left:0px; top:0px;}    
  113.     35% {background:pink; left:300px; top:0px;}    
  114.     50% {background:purple; left:0px; top:300px;}    
  115.     75% {background:green; left:300px; top:0px;}    
  116.     100% {background:blue; left:300px; top:0px;}    
  117. }      
  118. @keyframes myforth    
  119. {    
  120.     0% {background:red; left:0px; top:0px;}    
  121.     35% {background:pink; left:300px; top:300px;}    
  122.     50% {background:blue; left:0px; top:300px;}    
  123.     75% {background:green; left:0px; top:0px;}    
  124.     100% {background:blue; left:300px; top:0px;}    
  125. }     
  126. @-moz-keyframes myforth    
  127. {    
  128.     0% {background:red; left:0px; top:0px;}    
  129.     35% {background:pink; left:300px; top:300px;}    
  130.     50% {background:blue; left:0px; top:300px;}    
  131.     75% {background:green; left:0px; top:0px;}    
  132.     100% {background:blue; left:300px; top:0px;}    
  133. }    
  134. @-webkit-keyframes myforth /* For Google Chrome and Safari */    
  135. {    
  136.     0% {background:red; left:0px; top:0px;}    
  137.     35% {background:pink; left:300px; top:300px;}    
  138.     50% {background:blue; left:0px; top:300px;}    
  139.     75% {background:green; left:0px; top:0px;}    
  140.     100% {background:blue; left:300px; top:0px;}    
  141. }    
  142. @-o-keyframes mydivfirst /* Opera */    
  143. {    
  144.     0% {background:red; left:0px; top:0px;}    
  145.     25% {background:yellow; left:300px; top:0px;}    
  146.     75% {background:green; left:0px; top:300px;}    
  147.     100% {background:red; left:0px; top:0px;}    
  148. }    
  149. </style>   
The output will be
 
1.gif


Similar Articles