Flash like animation: Animated Side panel

Usually what we can find in a web page is some content and menu-bars links etc .Here i have developed a Side Panel of links with some CSS animation on it. The animation for the links is developed using pure CSS.

-No Images

-No JavaScript
-No HTML5
-No Flash
Pure CSS (CSS3)

menu_item_1

1.submenu of menuitem1
2.submenu of menuitem1

menu_item_2

1.submenu of menuitem2
2.submenu of menuitem2

menu_item_3

1.submenu of menuitem3
2.submenu of menuitem3

menu_item_4

1.submenu of menuitem4
2.submenu of menuitem4

Code of the Snippet

Paste this inside header part or your CSS style sheet

<style type="text/css">
/*****************************/
.menu{
position:relative;
left:100px;
top:10px;
margin-bottom:40px;



background:#f1f1f1 ;
width:200px;
border:#000000 solid 2px;
border-radius:5px;
padding:10px;
}
.m{
margin-bottom:5px;
position:relative;
padding:6px;
border:solid 2px #000000;
background:#FFFFFF;
border-radius:20px;
overflow:hidden;
height:80px;
animation: animation__1 0.5s linear 0s infinite alternate;
/* Firefox: */
-moz-animation: animation__1 0.5s linear 0s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: animation__1 0.5s linear 0s infinite alternate;
}


@keyframes animation__1
{
from {transform:skew(0deg,0deg);}
to {transform:skew(5deg,-5deg);}
}

@-moz-keyframes animation__1 /* Firefox */
{
from {-moz-transform: skew(0deg,0deg);}
to {-moz-transform: skew(5deg,-5deg);}
}

@-webkit-keyframes animation__1 /* Safari and Chrome */
{
from {-webkit-transform: skew(0deg,0deg);}
to {-webkit-transform: skew(5deg,-5deg);}
}
/****************************/
</style>

Paste the below code in the page where you want to create item

<div class="menu">
<div class="m">
menu_item_1<br />
<br />
<a href="https://www.blogger.com/blogger.g?blogID=8828447828563575220#">1.submenu of menuitem1</a><br />
<a href="https://www.blogger.com/blogger.g?blogID=8828447828563575220#">2.submenu of menuitem1</a></div>
<div class="m">
menu_item_2<br />
<br />
<a href="https://www.blogger.com/blogger.g?blogID=8828447828563575220#">1.submenu of menuitem2</a><br />
<a href="https://www.blogger.com/blogger.g?blogID=8828447828563575220#">2.submenu of menuitem2</a></div>
<div class="m">
menu_item_3<br />
<br />
<a href="https://www.blogger.com/blogger.g?blogID=8828447828563575220#">1.submenu of menuitem3</a><br />
<a href="https://www.blogger.com/blogger.g?blogID=8828447828563575220#">2.submenu of menuitem3</a></div>
<div class="m">
menu_item_4<br />
<br />
<a href="https://www.blogger.com/blogger.g?blogID=8828447828563575220#">1.submenu of menuitem4</a><br />
<a href="https://www.blogger.com/blogger.g?blogID=8828447828563575220#">2.submenu of menuitem4</a></div>
</div>
</div>