Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dropdown CSS animation examples.
.container
.nav
ul
- for(x = 1; x < 5; x++)
li STYLE #{x}
ul(class="drop-menu menu-#{x}")
li ONE
li TWO
li THREE
li FOUR
li FIVE
li SIX
.container
.nav
ul
- for(x = 5; x < 9; x++)
li STYLE #{x}
ul(class="drop-menu menu-#{x}")
li ONE
li TWO
li THREE
li FOUR
li FIVE
li SIX
html, body
padding: 0
margin: 0
background-color: #555
font-family: sans-serif
ul
list-style: none
.container
background-color: #fff
width: 600px
height: 450px
margin: 50px auto
border: 1px solid #333
border-radius: 4px
position: relative
.nav
display: inline-block
padding: 50px
text-align: center
margin: 0px 10px
position: absolute
li:hover
background: #3B95C4 + 20
> ul
list-style: none
padding: 0
margin: 0
display: inline-block
background: #3B95C4
border-radius: 5px
color: rgba(255,255,255,0.7)
> li
float: left
width: 120px
height: 50px
line-height: 50px
position: relative
font-size: 14px
cursor: pointer
ul.drop-menu
position: absolute
top: 100%
left: 0%
width: 100%
padding: 0
li
background: #3B95C4 - 10
&:hover
background: #3B95C4 + 10
&:first-child
border-radius: 2px 2px 0 0
&:last-child
border-radius: 0 0 5px 5px
ul.drop-menu li
display: none
li:hover > ul.drop-menu li
display: block
// Menu 1 ------------------------
li:hover > ul.drop-menu.menu-1
perspective: 1000px
li
transform-origin: top left
opacity: 0
@for $i from 1 through 6
&:nth-child(#{$i})
animation:
name: menu-1
duration: 300ms
delay: (150ms * $i) - 300ms
fill-mode: forwards
timing-function: ease-in-out
@keyframes menu-1
0%
opacity: 0
transform: rotateZ(90deg)
70%
transform: skewX(10deg)
100%
opacity: 1
transform: rotateZ(0deg)
// Menu 2 ------------------------
li:hover > ul.drop-menu.menu-2
perspective: 1000px
li
transform-origin: top center
opacity: 0
@for $i from 1 through 6
&:nth-child(#{$i})
animation:
name: menu-2
duration: 300ms
delay: (150ms * $i) - 300
fill-mode: forwards
timing-function: ease-in-out
@keyframes menu-2
0%
opacity: 0
transform: rotateX(-90deg)
50%
transform: rotateX(20deg)
100%
opacity: 1
transform: rotateX(0deg)
// Menu 3 ------------------------
li:hover > ul.drop-menu.menu-3
perspective: 1000px
li
transform-origin: top center
opacity: 0
@for $i from 1 through 6
&:nth-child(#{$i})
animation:
name: menu-3
duration: 300ms
delay: (150ms * $i) - 300
fill-mode: forwards
timing-function: ease-in-out
@keyframes menu-3
0%
opacity: 0
transform: rotateY(90deg)
70%
transform: rotateY(-10deg)
100%
opacity: 1
transform: rotateY(0deg)
// Menu 4 ------------------------
li:hover > ul.drop-menu.menu-4
perspective: 1000px
li
transform-origin: top center
opacity: 0
@for $i from 1 through 6
&:nth-child(#{$i})
animation:
name: menu-4
delay: (150ms * $i) - 300
duration: 300ms
fill-mode: forwards
timing-function: ease-in-out
@keyframes menu-4
0%
opacity: 0
transform: translateX(-100px)
70%
transform: translateX(20px)
100%
opacity: 1
transform: translateX(0px)
// Menu 5 ------------------------
li:hover > ul.drop-menu.menu-5
perspective: 1000px
li
transform-origin: top center
opacity: 0
@for $i from 1 through 6
&:nth-child(#{$i})
animation:
name: menu-5
duration: (300ms * $i) / 2
fill-mode: forwards
timing-function: ease-in-out
@keyframes menu-5
0%
opacity: 0
transform: scale(0)
50%
opacity: 1
90%
transform: scale(1.1)
100%
transform: scale(1)
opacity: 1
// Menu 6 ------------------------
li:hover > ul.drop-menu.menu-6
perspective: 1000px
li
transform-origin: top right
opacity: 0
@for $i from 1 through 6
&:nth-child(#{$i})
animation:
name: menu-6
delay: (150ms * $i) - 300ms
duration: 300ms
fill-mode: forwards
timing-function: ease-in-out
@keyframes menu-6
0%
opacity: 0
margin-top: 50px
transform: rotate(-45deg)
90%
margin-top: -10px
transform: rotate(0deg)
100%
opacity: 1
margin-top: 0px
// Menu 7 ------------------------
li:hover > ul.drop-menu.menu-7
perspective: 1000px
li
transform-origin: top left
opacity: 0
@for $i from 1 through 6
&:nth-child(#{$i})
animation:
name: menu-7
delay: (150ms * $i) - 300ms
duration: 600ms
fill-mode: forwards
timing-function: ease-in-out
@keyframes menu-7
0%
opacity: 0
transform: rotateY(90deg)
margin-top: -100px
80%
margin-top: 0px
transform: rotateY(90deg)
90%
transform: rotateY(-10deg)
margin-top: 5px
100%
opacity: 1
margin-top: 0px
transform: rotateY(0deg)
// Menu 8 ------------------------
li:hover > ul.drop-menu.menu-8
perspective: 1000px
li
transform-origin: top left
opacity: 0
@for $i from 1 through 6
&:nth-child(#{$i})
animation:
name: menu-8
delay: (150ms * $i) / 2
duration: 300ms
fill-mode: forwards
timing-function: ease-in-out
@keyframes menu-8
0%
opacity: 0
transform: skewX(45deg) skewY(-45deg)
80%
transform: skewX(-10) skewY(-10)
100%
opacity: 1
transform: skewX(0deg) skewY(0deg)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment