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

#div2 {
    animation: mythird 2s;
    -webkit-animation: mythird 2s; /* For Google Chrome and Safari */
    -moz-animation: mythird 2s; /* For Mozilla Firefox */
    -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.

<table>  
    <tr>  
        <td>  
            <div></div>  
        </td>  
        <td>  
            <div id="div1"></div>  
        </td>  
    </tr>  
    <tr>  
        <td>  
            <div id="div2"></div>  
        </td>  
        <td>  
            <div id="div3"></div>  
        </td>  
    </tr>  
</table>

Step 2. After that we write the following code in the <style> tag.

<style type="text/css">    
    div {    
        width: 50px;    
        height: 50px;    
        background: red;    
        position: relative;    
        animation: mydivfirst 2s;    
        -webkit-animation: mydivfirst 2s; /* For Google Chrome and Safari */    
        -moz-animation: mydivfirst 2s; /* For Mozilla Firefox */    
        -o-animation: mydivfirst 2s; /* Opera */    
    }    
    
    #div1 {    
        width: 50px;    
        height: 50px;    
        background: green;    
        position: relative;    
        animation: mysecond 2s;    
        -moz-animation: mysecond 2s; /* For Mozilla Firefox */    
        -webkit-animation: mysecond 2s; /* For Google Chrome and Safari */    
        -o-animation: mysecond 2s; /* Opera */    
    }    
    
    #div2 {    
        width: 50px;    
        height: 50px;    
        background: blue;    
        position: relative;    
        animation: mythird 2s;    
        -webkit-animation: mythird 2s; /* For Google Chrome and Safari */    
        -moz-animation: mythird 2s; /* For Mozilla Firefox */    
        -o-animation: mythird 2s; /* Opera */    
    }    
    
    #div3 {    
        width: 50px;    
        height: 50px;    
        background: orange;    
        position: relative;    
        animation: myforth 2s;    
        -webkit-animation: myforth 2s; /* For Google Chrome and Safari */    
        -o-animation: myforth 2s; /* Opera */    
        -moz-animation: myforth 2s; /* For Mozilla Firefox */    
    }    
    
    @keyframes mydivfirst {    
        0% { background: red; left: 0px; top: 0px; }    
        25% { background: pink; left: 300px; top: 0px; }    
        50% { background: blue; left: 300px; top: 300px; }    
        75% { background: green; left: 0px; top: 300px; }    
        100% { background: blue; left: 0px; top: 0px; }    
    }    
    
    @-moz-keyframes mydivfirst { /* For Firefox */    
        0% { background: red; left: 0px; top: 0px; }    
        25% { background: yellow; left: 300px; top: 0px; }    
        50% { background: blue; left: 300px; top: 300px; }    
        75% { background: green; left: 0px; top: 300px; }    
        100% { background: red; left: 0px; top: 0px; }    
    }    
    
    @-webkit-keyframes mydivfirst { /* For Google Chrome and Safari */    
        0% { background: red; left: 0px; top: 300px; }    
        35% { background: pink; left: 300px; top: 0px; }    
        50% { background: blue; left: 0px; top: 300px; }    
        75% { background: green; left: 0px; top: 0px; }    
        100% { background: blue; left: 300px; top: 0px; }    
    }    
    
    @keyframes mysecond {    
        0% { background: blue; left: 300px; top: 0px; }    
        35% { background: pink; left: 0px; top: 300px; }    
        50% { background: brown; left: 300px; top: 300px; }    
        75% { background: green; left: 0px; top: 0px; }    
        100% { background: blue; left: 300px; top: 0px; }    
    }    
    
    @-moz-keyframes mysecond {    
        0% { background: blue; left: 300px; top: 0px; }    
        35% { background: pink; left: 0px; top: 300px; }    
        50% { background: brown; left: 300px; top: 300px; }    
        75% { background: green; left: 0px; top: 0px; }    
        100% { background: blue; left: 300px; top: 0px; }    
    }    
    
    @-webkit-keyframes mysecond { /* For Google Chrome and Safari */    
        0% { background: blue; left: 300px; top: 0px; }    
        35% { background: pink; left: 0px; top: 300px; }    
        50% { background: brown; left: 300px; top: 300px; }    
        75% { background: green; left: 0px; top: 0px; }    
        100% { background: blue; left: 300px; top: 0px; }    
    }    
    
    @keyframes mythird {    
        0% { background: blue; left: 0px; top: 0px; }    
        35% { background: pink; left: 300px; top: 0px; }    
        50% { background: purple; left: 0px; top: 300px; }    
        75% { background: green; left: 300px; top: 0px; }    
        100% { background: blue; left: 300px; top: 0px; }    
    }    
    
    @-moz-keyframes mythird {    
        0% { background: blue; left: 0px; top: 0px; }    
        35% { background: pink; left: 300px; top: 0px; }    
        50% { background: purple; left: 0px; top: 300px; }    
        75% { background: green; left: 300px; top: 0px; }    
        100% { background: blue; left: 300px; top: 0px; }    
    }    
    
    @-webkit-keyframes mythird { /* For Google Chrome and Safari */    
        0% { background: blue; left: 0px; top: 0px; }    
        35% { background: pink; left: 300px; top: 0px; }    
        50% { background: purple; left: 0px; top: 300px; }    
        75% { background: green; left: 300px; top: 0px; }    
        100% { background: blue; left: 300px; top: 0px; }    
    }    
    
    @keyframes myforth {    
        0% { background: red; left: 0px; top: 0px; }    
        35% { background: pink; left: 300px; top: 300px; }    
        50% { background: blue; left: 0px; top: 300px; }    
        75% { background: green; left: 0px; top: 0px; }    
        100% { background: blue; left: 300px; top: 0px; }    
    }    
    
    @-moz-keyframes myforth {    
        0% { background: red; left: 0px; top: 0px; }    
        35% { background: pink; left: 300px; top: 300px; }    
        50% { background: blue; left: 0px; top: 300px; }    
        75% { background: green; left: 0px; top: 0px; }    
        100% { background: blue; left: 300px; top: 0px; }    
    }    
    
    @-webkit-keyframes myforth { /* For Google Chrome and Safari */    
        0% { background: red; left: 0px; top: 0px; }    
        35% { background: pink; left: 300px; top: 300px; }    
        50% { background: blue; left: 0px; top: 300px; }    
        75% { background: green; left: 0px; top: 0px; }    
        100% { background: blue; left: 300px; top: 0px; }    
    }    
    
    @-o-keyframes mydivfirst { /* Opera */    
        0% { background: red; left: 0px; top: 0px; }    
        25% { background: yellow; left: 300px; top: 0px; }    
        75% { background: green; left: 0

The output will be