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;
- -moz-animation:mythird 2s;
- -o-animation:mythird 2s;
- }
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:
The output will be