HTML
<header class="codeconveyHeader">
<h1>CSS3 Animated Dropdown Menu <span></span></h1>
<h2>Animation with Just CSS3</h2>
<p class="demo"></div><a class="readmore" href="http://codeconvey.com/css3-animated-dropdown-menu-without-javascript/">Find More Details Here</a>
</p>
</header>
<div class="AniNav">
<ul class="AniNavList">
<li class="AniNavMenu">Home
<ul class="nav__menu-lists nav__menu--1-lists">
<li class="nav__menu-items">Services</li>
<li class="nav__menu-items">About</li>
<li class="nav__menu-items">Contact</li>
<li class="nav__menu-items">Product</li>
<li class="nav__menu-items">Cart</li>
</ul>
</li>
<li class="AniNavMenu">Property
<ul class="nav__menu-lists nav__menu--2-lists">
<li class="nav__menu-items">Etiam</li>
<li class="nav__menu-items">Lectus</li>
<li class="nav__menu-items">Netus</li>
<li class="nav__menu-items">Dictum</li>
<li class="nav__menu-items">Nibh</li>
</ul>
</li>
<li class="AniNavMenu">Land
<ul class="nav__menu-lists nav__menu--1-lists">
<li class="nav__menu-items">Services</li>
<li class="nav__menu-items">About</li>
<li class="nav__menu-items">Contact</li>
<li class="nav__menu-items">Product</li>
<li class="nav__menu-items">Cart</li>
</ul>
</li>
<li class="AniNavMenu">Buy
<ul class="nav__menu-lists nav__menu--1-lists">
<li class="nav__menu-items">Services</li>
<li class="nav__menu-items">About</li>
<li class="nav__menu-items">Contact</li>
<li class="nav__menu-items">Product</li>
<li class="nav__menu-items">Cart</li>
</ul>
</li>
<li class="AniNavMenu">Sell
<ul class="nav__menu-lists nav__menu--1-lists">
<li class="nav__menu-items">Services</li>
<li class="nav__menu-items">About</li>
<li class="nav__menu-items">Contact</li>
<li class="nav__menu-items">Product</li>
<li class="nav__menu-items">Cart</li>
</ul>
</li>
</ul>
</div>
CSS
html {
box-sizing: border-box;
}
body {
height: 100vh;
font-family: 'Roboto', sans-serif;
font-weight: 500;
color: #fff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9de96+0,8ab66b+44,398235+100;Green+3D+%233 */
background: #c9de96; /* Old browsers */
background: -moz-linear-gradient(45deg, #c9de96 0%, #8ab66b 44%, #398235 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #c9de96 0%,#8ab66b 44%,#398235 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #c9de96 0%,#8ab66b 44%,#398235 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.AniNav {
background: #3f4c6b none repeat scroll 0 0;
margin-top: 30px;
text-align: center;
width: 100%;
}
.AniNavList {
display: inline-block;
}
.AniNavMenu {
float: left;
width: 140px;
height: 65px;
line-height: 65px;
text-transform: uppercase;
background-color: #3f4c6b;
cursor: pointer;
}
.AniNavMenu:hover {
background-color: #0C2868;
}
.AniNavMenu:hover > .nav__menu-lists li {
display: block;
}
.AniNavMenu:hover > .nav__menu--1-lists li:nth-child(1) {
opacity: 0;
-webkit-animation: menu1 ease-in-out forwards;
animation: menu1 ease-in-out forwards;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
}
@-webkit-keyframes menu1 {
from {
opacity: 0;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
to {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
@keyframes menu1 {
from {
opacity: 0;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
to {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
.AniNavMenu:hover > .nav__menu--1-lists li:nth-child(2) {
opacity: 0;
-webkit-animation: menu1 ease-in-out forwards;
animation: menu1 ease-in-out forwards;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 150ms;
animation-delay: 150ms;
}
@keyframes menu1 {
from {
opacity: 0;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
to {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
.AniNavMenu:hover > .nav__menu--1-lists li:nth-child(3) {
opacity: 0;
-webkit-animation: menu1 ease-in-out forwards;
animation: menu1 ease-in-out forwards;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
@keyframes menu1 {
from {
opacity: 0;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
to {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
.AniNavMenu:hover > .nav__menu--1-lists li:nth-child(4) {
opacity: 0;
-webkit-animation: menu1 ease-in-out forwards;
animation: menu1 ease-in-out forwards;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
}
@keyframes menu1 {
from {
opacity: 0;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
to {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
.AniNavMenu:hover > .nav__menu--1-lists li:nth-child(5) {
opacity: 0;
-webkit-animation: menu1 ease-in-out forwards;
animation: menu1 ease-in-out forwards;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 600ms;
animation-delay: 600ms;
}
@keyframes menu1 {
from {
opacity: 0;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
to {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
.AniNavMenu:hover > .nav__menu--2-lists li:nth-child(1) {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-animation: menu2 ease-in-out forwards;
animation: menu2 ease-in-out forwards;
-webkit-animation-duration: 175ms;
animation-duration: 175ms;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
}
@-webkit-keyframes menu2 {
0% {
opacity: 0;
-webkit-transform: translateY(-100%) scale(0.3);
transform: translateY(-100%) scale(0.3);
}
100% {
opacity: 1;
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
}
}
@keyframes menu2 {
0% {
opacity: 0;
-webkit-transform: translateY(-100%) scale(0.3);
transform: translateY(-100%) scale(0.3);
}
100% {
opacity: 1;
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
}
}
.AniNavMenu:hover > .nav__menu--2-lists li:nth-child(2) {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-animation: menu2 ease-in-out forwards;
animation: menu2 ease-in-out forwards;
-webkit-animation-duration: 175ms;
animation-duration: 175ms;
-webkit-animation-delay: 145.83333ms;
animation-delay: 145.83333ms;
}
@keyframes menu2 {
0% {
opacity: 0;
-webkit-transform: translateY(-100%) scale(0.3);
transform: translateY(-100%) scale(0.3);
}
100% {
opacity: 1;
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
}
}
.AniNavMenu:hover > .nav__menu--2-lists li:nth-child(3) {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-animation: menu2 ease-in-out forwards;
animation: menu2 ease-in-out forwards;
-webkit-animation-duration: 175ms;
animation-duration: 175ms;
-webkit-animation-delay: 291.66667ms;
animation-delay: 291.66667ms;
}
@keyframes menu2 {
0% {
opacity: 0;
-webkit-transform: translateY(-100%) scale(0.3);
transform: translateY(-100%) scale(0.3);
}
100% {
opacity: 1;
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
}
}
.AniNavMenu:hover > .nav__menu--2-lists li:nth-child(4) {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-animation: menu2 ease-in-out forwards;
animation: menu2 ease-in-out forwards;
-webkit-animation-duration: 175ms;
animation-duration: 175ms;
-webkit-animation-delay: 437.5ms;
animation-delay: 437.5ms;
}
@keyframes menu2 {
0% {
opacity: 0;
-webkit-transform: translateY(-100%) scale(0.3);
transform: translateY(-100%) scale(0.3);
}
100% {
opacity: 1;
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
}
}
.AniNavMenu:hover > .nav__menu--2-lists li:nth-child(5) {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-animation: menu2 ease-in-out forwards;
animation: menu2 ease-in-out forwards;
-webkit-animation-duration: 175ms;
animation-duration: 175ms;
-webkit-animation-delay: 583.33333ms;
animation-delay: 583.33333ms;
}
@keyframes menu2 {
0% {
opacity: 0;
-webkit-transform: translateY(-100%) scale(0.3);
transform: translateY(-100%) scale(0.3);
}
100% {
opacity: 1;
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
}
}
.AniNavMenu:hover > .nav__menu--3-lists li:nth-child(1) {
opacity: 0;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation: menu3 ease-in-out forwards;
animation: menu3 ease-in-out forwards;
-webkit-animation-duration: 200ms;
animation-duration: 200ms;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
}
@-webkit-keyframes menu3 {
0% {
opacity: 0;
-webkit-transform: rotate(-45deg) translateX(50%);
transform: rotate(-45deg) translateX(50%);
}
100% {
opacity: 1;
-webkit-transform: rotate(0) translateX(0);
transform: rotate(0) translateX(0);
}
}
@keyframes menu3 {
0% {
opacity: 0;
-webkit-transform: rotate(-45deg) translateX(50%);
transform: rotate(-45deg) translateX(50%);
}
100% {
opacity: 1;
-webkit-transform: rotate(0) translateX(0);
transform: rotate(0) translateX(0);
}
}
.AniNavMenu:hover > .nav__menu--3-lists li:nth-child(2) {
opacity: 0;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation: menu3 ease-in-out forwards;
animation: menu3 ease-in-out forwards;
-webkit-animation-duration: 200ms;
animation-duration: 200ms;
-webkit-animation-delay: 153.84615ms;
animation-delay: 153.84615ms;
}
@keyframes menu3 {
0% {
opacity: 0;
-webkit-transform: rotate(-45deg) translateX(50%);
transform: rotate(-45deg) translateX(50%);
}
100% {
opacity: 1;
-webkit-transform: rotate(0) translateX(0);
transform: rotate(0) translateX(0);
}
}
.AniNavMenu:hover > .nav__menu--3-lists li:nth-child(3) {
opacity: 0;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation: menu3 ease-in-out forwards;
animation: menu3 ease-in-out forwards;
-webkit-animation-duration: 200ms;
animation-duration: 200ms;
-webkit-animation-delay: 307.69231ms;
animation-delay: 307.69231ms;
}
@keyframes menu3 {
0% {
opacity: 0;
-webkit-transform: rotate(-45deg) translateX(50%);
transform: rotate(-45deg) translateX(50%);
}
100% {
opacity: 1;
-webkit-transform: rotate(0) translateX(0);
transform: rotate(0) translateX(0);
}
}
.AniNavMenu:hover > .nav__menu--3-lists li:nth-child(4) {
opacity: 0;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation: menu3 ease-in-out forwards;
animation: menu3 ease-in-out forwards;
-webkit-animation-duration: 200ms;
animation-duration: 200ms;
-webkit-animation-delay: 461.53846ms;
animation-delay: 461.53846ms;
}
@keyframes menu3 {
0% {
opacity: 0;
-webkit-transform: rotate(-45deg) translateX(50%);
transform: rotate(-45deg) translateX(50%);
}
100% {
opacity: 1;
-webkit-transform: rotate(0) translateX(0);
transform: rotate(0) translateX(0);
}
}
.AniNavMenu:hover > .nav__menu--3-lists li:nth-child(5) {
opacity: 0;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation: menu3 ease-in-out forwards;
animation: menu3 ease-in-out forwards;
-webkit-animation-duration: 200ms;
animation-duration: 200ms;
-webkit-animation-delay: 615.38462ms;
animation-delay: 615.38462ms;
}
@keyframes menu3 {
0% {
opacity: 0;
-webkit-transform: rotate(-45deg) translateX(50%);
transform: rotate(-45deg) translateX(50%);
}
100% {
opacity: 1;
-webkit-transform: rotate(0) translateX(0);
transform: rotate(0) translateX(0);
}
}
.AniNavMenu:hover > .nav__menu--4-lists li:nth-child(1) {
opacity: 0;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation: menu4 ease-in-out forwards;
animation: menu4 ease-in-out forwards;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
}
@-webkit-keyframes menu4 {
0% {
opacity: 0;
-webkit-transform: rotateY(-90deg) rotateX(-90deg);
transform: rotateY(-90deg) rotateX(-90deg);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0) rotateX(0);
transform: rotateY(0) rotateX(0);
}
}
@keyframes menu4 {
0% {
opacity: 0;
-webkit-transform: rotateY(-90deg) rotateX(-90deg);
transform: rotateY(-90deg) rotateX(-90deg);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0) rotateX(0);
transform: rotateY(0) rotateX(0);
}
}
.AniNavMenu:hover > .nav__menu--4-lists li:nth-child(2) {
opacity: 0;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation: menu4 ease-in-out forwards;
animation: menu4 ease-in-out forwards;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 125ms;
animation-delay: 125ms;
}
@keyframes menu4 {
0% {
opacity: 0;
-webkit-transform: rotateY(-90deg) rotateX(-90deg);
transform: rotateY(-90deg) rotateX(-90deg);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0) rotateX(0);
transform: rotateY(0) rotateX(0);
}
}
.AniNavMenu:hover > .nav__menu--4-lists li:nth-child(3) {
opacity: 0;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation: menu4 ease-in-out forwards;
animation: menu4 ease-in-out forwards;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 250ms;
animation-delay: 250ms;
}
@keyframes menu4 {
0% {
opacity: 0;
-webkit-transform: rotateY(-90deg) rotateX(-90deg);
transform: rotateY(-90deg) rotateX(-90deg);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0) rotateX(0);
transform: rotateY(0) rotateX(0);
}
}
.AniNavMenu:hover > .nav__menu--4-lists li:nth-child(4) {
opacity: 0;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation: menu4 ease-in-out forwards;
animation: menu4 ease-in-out forwards;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 375ms;
animation-delay: 375ms;
}
@keyframes menu4 {
0% {
opacity: 0;
-webkit-transform: rotateY(-90deg) rotateX(-90deg);
transform: rotateY(-90deg) rotateX(-90deg);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0) rotateX(0);
transform: rotateY(0) rotateX(0);
}
}
.AniNavMenu:hover > .nav__menu--4-lists li:nth-child(5) {
opacity: 0;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation: menu4 ease-in-out forwards;
animation: menu4 ease-in-out forwards;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
@keyframes menu4 {
0% {
opacity: 0;
-webkit-transform: rotateY(-90deg) rotateX(-90deg);
transform: rotateY(-90deg) rotateX(-90deg);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0) rotateX(0);
transform: rotateY(0) rotateX(0);
}
}
.AniNavMenu:hover > .nav__menu--5-lists li:nth-child(1) {
opacity: 0;
-webkit-animation: menu5 ease-in-out forwards;
animation: menu5 ease-in-out forwards;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
}
@-webkit-keyframes menu5 {
0% {
opacity: 0;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
}
@keyframes menu5 {
0% {
opacity: 0;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
}
.AniNavMenu:hover > .nav__menu--5-lists li:nth-child(2) {
opacity: 0;
-webkit-animation: menu5 ease-in-out forwards;
animation: menu5 ease-in-out forwards;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 125ms;
animation-delay: 125ms;
}
@keyframes menu5 {
0% {
opacity: 0;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
}
.AniNavMenu:hover > .nav__menu--5-lists li:nth-child(3) {
opacity: 0;
-webkit-animation: menu5 ease-in-out forwards;
animation: menu5 ease-in-out forwards;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 250ms;
animation-delay: 250ms;
}
@keyframes menu5 {
0% {
opacity: 0;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
}
.AniNavMenu:hover > .nav__menu--5-lists li:nth-child(4) {
opacity: 0;
-webkit-animation: menu5 ease-in-out forwards;
animation: menu5 ease-in-out forwards;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 375ms;
animation-delay: 375ms;
}
@keyframes menu5 {
0% {
opacity: 0;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
}
.AniNavMenu:hover > .nav__menu--5-lists li:nth-child(5) {
opacity: 0;
-webkit-animation: menu5 ease-in-out forwards;
animation: menu5 ease-in-out forwards;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
@keyframes menu5 {
0% {
opacity: 0;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
}
.AniNavMenu-lists {
-webkit-perspective: 5000px;
perspective: 5000px;
}
.nav__menu-items {
display: none;
width: 140px;
height: 65px;
background-color: #3f4c6b;
}
.nav__menu-items:hover {
background-color: #0C2868;
}
.nav__menu:nth-child(1) {
border-top-left-radius: 10px;
}
.nav__menu:last-child {
border-top-right-radius: 10px;
}
/* demo purpose*/
.codeconveyHeader {
margin: 0 auto;
text-align: center;
}
.codeconveyHeader h1 {
color: #fff;
font-size: 1.5em;
font-weight: 700;
margin: 15px 0;
}
.codeconveyHeader h2 {
font-size: 1em;
}
.codeconveyHeader h1 span {
display: block;
padding: 0 0 0.6em 0.1em;
font-size: 0.2em;
opacity: 0.7;
}
.demo {
font-family: 'Raleway', sans-serif;
color:#fff;
display: block;
margin: 0 auto;
padding: 15px 0;
text-align: center;
}
.demo a{
font-family: 'Raleway', sans-serif;
color: #000;
}
2 Responses