Creative CSS3 Animation Menus

Creative CSS3 Animation Menus
1 of 22
http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/
Codrops
In Tutorials by Mary Lou October 24, 2011 122 Comments
Being in the mood for experimenting with CSS3, I'd like to

show you some creative menu hover effects in today's
tutorial. The idea is to have a simple composition of
elements, an icon, a main title and a secondary title, that will
be animated on hover using only CSS transitions and
animations. We'll be exploring some different effects for the
elements.
6/13/2015 9:03 AM
2 of 22
Being in the mood for experimenting with CSS3, Id like to show

you some creative menu hover effects in todays tutorial. The idea
is to have a simple composition of elements, an icon, a main title
and a secondary title, that will be animated on hover using only
CSS transitions and animations. Well be exploring some different
effects for the elements.
The icons used in the demos are actually a Web Symbols
typeface that well include with @font-face. The typeface is done
by the Just Be Nice studio.
The Markup
The HTML structure for the menu will be an unordered list where
each item is a link element that consists of an icon span and a
content div that will contain the main title and the secondary title:
<ul class="ca-menu">
<li>
<a href="#">
<span class="ca-icon">A</span>
<div class="ca-content">
<h2 class="ca-main">Exceptional Service
<h3 class="ca-sub">Personalized to your needs
</div>
</a>
</li>
...
</ul>
As we are using a symbol font for the icons, we write letters for
6/13/2015 9:03 AM
3 of 22
the icons.
The CSS
The common style for all the examples will be the inclusion of the
symbol typeface:
@font-face {
font-family: 'WebSymbolsRegular';
src: url('websymbols/websymbols-regular-webfont.eot');
src: url('websymbols/websymbols-regular-webfont.eot?#iefix'
url('websymbols/websymbols-regular-webfont.woff') format
url('websymbols/websymbols-regular-webfont.ttf') format
url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular'
font-weight: normal;
font-style: normal;
}
The path of the files is relative to the CSS file, hence, they will be
in the folder css/websymbols/.
The great advantage of having a font for the icons is that we can
apply all those nice effects to it, for example a text shadow. We
can also scale it to our needs.
The style for the unordered list will almost be the same for every
example, well just adapt the width of it, so that we can center it on
the screen:
.ca-menu{
padding: 0;
margin: 20px auto;
width: 500px;
}
6/13/2015 9:03 AM
4 of 22
In the following examples, I will show you the styling of the

elements that will be subject to the effects.
In the first example well look at the styling of all elements and in
the other example well be focusing on the adaptions.
Note: In the following examples I will not write any browser
specific prefixes because I dont want to bloat the CSS, but youll
find all the necessary prefixes in the demo files.
Example 1
In this example well have stacked menu where we will change

the sizes of the elements and the background color of the whole
item.
Lets define the list item style:
.ca-menu li{
width: 500px;
height: 100px;
overflow: hidden;
display: block;
6/13/2015 9:03 AM
5 of 22
background: #fff;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-bottom: 4px;
border-left: 10px solid #000;
transition: all 300ms ease-in-out;
}
.ca-menu li:last-child{
margin-bottom: 0px;
}
The transition will be for all properties since well want to change
the border color and the background color.
The link element will have the following style:
.ca-menu li a{
text-align: left;
display: block;
width: 100%;
height: 100%;
color: #333;
position:relative;
}
Lets define the style for the single elements.

The icon span will have the following style, placing it at the left
side:
.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
font-size: 20px;
text-shadow: 0px 0px 1px #333;
line-height: 90px;
position: absolute;
width: 90px;
left: 20px;
6/13/2015 9:03 AM
6 of 22
text-align: center;
transition: all 300ms linear;
}
As you can see, well use the web symbols as the font family.
Each letter will be an icon.
The wrapper for the content elements will have the following style:
.ca-content{
position: absolute;
left: 120px;
width: 370px;
height: 60px;
top: 20px;
}
The content elements will vary in their font size and have a linear
transition:
.ca-main{
font-size: 30px;
}
.ca-sub{
font-size: 14px;
color: #666;
}
And now it comes the interesting part. On hover over the list
element we will change the font sizes and the colors:
.ca-menu li:hover{
border-color: #fff004;
6/13/2015 9:03 AM
7 of 22
background: #000;
}
.ca-menu li:hover .ca-icon{
color: #fff004;
text-shadow: 0px 0px 1px #fff004;
font-size: 50px;
}
.ca-menu li:hover .ca-main{
color: #fff004;
font-size: 14px;
}
.ca-menu li:hover .ca-sub{
color: #fff;
font-size: 30px;
}
Since we defined a transition for each of those elements, the

change will be animated.
Example 2
In the second example well add some animations for the content
elements. The idea is to animate them from the top and the
bottom:
6/13/2015 9:03 AM
8 of 22
.ca-menu li:hover{
background: #e1f0fa;
}
font-size: 40px;
color: #259add;
opacity: 0.8;
text-shadow: 0px 0px 13px #fff;
}
opacity: 1;
color:#2676ac;
animation: moveFromTop 300ms ease-in-out;
}
opacity: 1;
animation: moveFromBottom 300ms ease-in-out;
}
Lets define the two animations. The first one will start from putting
the respective element 200% down the Y Axis which means that it
will be pushed down. Also, it will have an opacity of 0. Then it will
animate to the origin by setting the translateY to 0%, basically
saying well go back to the point we were initially:
@keyframes moveFromBottom {
from {
opacity: 0;
transform: translateY(200%);
}
to {
opacity: 1;
}
}
6/13/2015 9:03 AM
9 of 22
The second animation will move an element from the top with the
same principles:
@keyframes moveFromTop {
from {
opacity: 0;
transform: translateY(-200%);
}
to {
opacity: 1;
}
}
Example 3
In this example we want to change the background and text color

on hover. We will also rotate and enlarge the icon. That we can do
with the transform property and by enlarging the font size of the
icon:
.ca-menu li:hover{
background-color: #000;
6/13/2015 9:03 AM
10 of 22
}
color: #f900b0;
font-size: 120px;
opacity: 0.2;
left: -20px;
transform: rotate(20deg);
}
color: #f900b0;
opacity: 0.8;
}
color: #fff;
opacity: 0.8;
}
Example 4
Example 4 to example 8 will use a different layout for the menu.

The items will be floating next to each other:
.ca-menu li{
width: 200px;
height: 300px;
overflow: hidden;
position: relative;
float: left;
border: 5px solid #fff;
6/13/2015 9:03 AM
11 of 22
background: #e2f0ff;
margin-right: 4px;
}
.ca-menu li:last-child{
margin-right: 0px;
}
The icon will be placed on the upper half in the center of the item:
.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
color: #c5e4f4;
font-size: 90px;
text-shadow: 1px 0px 1px rgba(255,255,255,0.7);
line-height: 150px;
position: absolute;
width: 100%;
height: 50%;
left: 0px;
top: 0px;
text-align: center;
}
The content wrapper will be placed on the lower part of the item:
.ca-content{
position: absolute;
left: 0px;
width: 100%;
height: 50%;
top: 50%;
}
6/13/2015 9:03 AM
12 of 22
The main title and the secondary title will have the following style:
.ca-main{
font-size: 30px;
color: #005382;
opacity: 0.8;
text-align: center;
}
.ca-sub{
text-align:center;
font-size: 14px;
color: #666;
line-height: 40px;
opacity: 0.8;
}
On hover we want to blur the icon while we slide it from the top,
change the background color and slide the content items from the
top and bottom:
.ca-menu li:hover{
background-color: #fff;
}
text-shadow: 0px 0px 20px #c5e4f4;
color: transparent;
animation: moveFromTop 400ms ease;
}
color: #000;
animation: moveFromTop 300ms ease;
}
color: #000;
6/13/2015 9:03 AM
13 of 22
animation: moveFromBottom 500ms ease;

}
The blurring of the icon happens when we set its color to

transparent and give it a text shadow with a lot of fuzziness.
The animations will be the same ones we used in one of the
previous examples with the exception of the translate values for
the moveFromTop animation. Here we will set the translateY to
-300%.
Example 5
In the fifth example we want to slide the icon in from the left, the
title from the right and the secondary title from the bottom:
.ca-menu li:hover{
background:#fff;
}
color: #afa379;
font-size: 90px;
opacity: 0.1;
animation: moveFromLeft 400ms ease;
}
color: #afa379;
animation: moveFromRight 300ms ease;
6/13/2015 9:03 AM
14 of 22
}
color: #000;
}
The moveFromBottom animation we know already, lets take a

look at moveFromLeft that moves the respective element to the
left by setting the translateX to -100% and then moves it back to
its origin:
@keyframes moveFromLeft{
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
In the moveFromRight animation well set it to translateX(100%)

initially.
Example 6
In this example we want to slide in the title from the left and also
6/13/2015 9:03 AM
15 of 22
rotate it at the same time:
.ca-menu li:hover{
}
color: #fff;
font-size: 90px;
}
color: #00ccff;
animation: moveFromLeftRotate 300ms ease;
}
color: #fff;
}
The moveFromLeftRotate animation will move an item and

rotate it:
@keyframes moveFromLeftRotate{
from {
transform: translateX(-100%) rotate(-90deg);
}
to {
transform: translateX(0%) rotate(0deg);
}
}
Example 7
6/13/2015 9:03 AM
16 of 22
In this example, well set the secondary title to be at the bottom of

the item:
.ca-sub{
text-align:center;
font-size: 14px;
color: #666;
line-height: 40px;
opacity: 0.8;
position: absolute;
bottom: 0;
width: 100%;
}
We want to slide it in from the bottom and change its background

color.
The icon will slide in from the bottom while the main title will
appear to increase from small to big:
.ca-menu li:hover{
}
color: #ff2020;
}
color: #ff2020;
animation: smallToBig 300ms ease;
}
color: #000;
6/13/2015 9:03 AM
17 of 22
background-color: #ff2020;
}
The smallToBig animation is an example on how to use the scale

transfrom:
@keyframes smallToBig{
from {
transform: scale(0.1);
}
to {
transform: scale(1);
}
}
Example 8
In this example, we want to enlarge the whole list item when

hovering. Well do that by scaling it to 1.1.
We also have a special icon span with the ID #heart. This span
will be red and on hover well use the smallToBig animation in a
special way: well alternate the animation infinitely creating a
lovely heart-beat effect.
.ca-menu li:hover{
6/13/2015 9:03 AM
18 of 22
z-index:999;
}
color: #ccff00;
font-size: 90px;
opacity:0.3;
}
.ca-menu li:hover .ca-icon#heart{
animation: smallToBig 900ms alternate infinite ease;
}
color: #ccff00;
animation: smallToBig 300ms ease;
}
color: #ccff00;
}
Example 9
The last two examples will be circles, so well change the style for
the list elements:
.ca-menu li{
width: 230px;
height: 230px;
border: 10px solid #f6f6f6;
6/13/2015 9:03 AM
19 of 22
overflow: hidden;
position: relative;
float:left;
background: #fff;
margin-right: 4px;
border-radius: 125px;
}
In order to create a circle we need to set the border radius to half

of the elements outer width/height.
Placing the elements in the list item absolutely and centering
them, well do the following on hover:
.ca-menu li:hover{
background: #f7f7f7;
border-color: #fff;
transform: rotate(360deg);
}
color: #555;
font-size: 60px;
}
display: none;
}
opacity: 0.8;
}
The item will be rotated 360 degrees and the main title will
disappear, letting the secondary item appear (its opacity was
initially set to 0).
Example 10
6/13/2015 9:03 AM
20 of 22
In the last example, the list items are going to have a left margin
of -48px. This will make overlap. Then on hover, we will scale
them and increase the z-index, so that the hovered item stays on
top:
.ca-menu li:hover{
border-color: #333;
z-index: 999;
}
color: #000;
font-size: 60px;
text-shadow: 0px 0px 1px #000;
}
color: #000;
}
And thats it! I hope you enjoyed these little experiments and find
them inspiring and useful!
Please note that these animation and transitions will only work in
the latest versions of truly modern web browsers, such as Google
Chrome, Apple Safari and Mozilla Firefox.
6/13/2015 9:03 AM
21 of 22
Related Articles
Creating a Border Animation Effect with SVG and CSS
Page Loading Effects
Inspiration for Item Transitions
6/13/2015 9:03 AM
22 of 22
6/13/2015 9:03 AM

Creative CSS3 Animation Menus

Uploaded by

Copyright:

Available Formats

Creative CSS3 Animation Menus

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Creative CSS3 Animation Menus

Uploaded by

Copyright:

Available Formats

Creative CSS3 Animation Menus

In Tutorials by Mary Lou October 24, 2011 122 Comments

Being in the mood for experimenting with CSS3, I'd like to