How To Use CSS3 for Menu Transitions and Animations

It seems like everyone is experimenting with CSS3 these days, getting ready for the big day when all browsers work harmoniously together for seamless web design. Until then, we can play and learn from each other’s code. Today’s CSS3 animation code does work on all browsers, so that it won’t appear broken in Internet Explorer 9, but you also won’t see all of the effects.

Here’s a demo that shows what this article will discuss. The demo contains 10 different examples of CSS3 animations and transformations. Each one is a little different and hopefully you can find a use for this code on one of your sites. This code was originally written by Mary Lou, who we have showcased on HTMLgoodies in the past.

Code That Is Common To All Examples

We’ll start with the HTML, because that will stay consistent for all of the examples. The HTML is basically an unordered list with each item being a link element that consists of an icon span and a content div. The span and the div 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</h2>

<h3 class=”ca-sub”>Personalized to your needs</h3>

</div>

</a>

</li>

…

</ul>

Moving on to the CSS, the basic styling will remain the same for all 10 examples.

@font-face {

font-family: ‘WebSymbolsRegular’;

src: url(‘websymbols/websymbols-regular-webfont.eot’);

src: url(‘websymbols/websymbols-regular-webfont.eot?#iefix’) format(’embedded-opentype’),

url(‘websymbols/websymbols-regular-webfont.woff’) format(‘woff’),

url(‘websymbols/websymbols-regular-webfont.ttf’) format(‘truetype’),

url(‘websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular’) format(‘svg’);

font-weight: normal;

font-style: normal;

}

This code will include the symbol typeface in your work. By having a font for the icons, you can apply effects to them, such as a shadow. This technique also allows you to scale the font to your needs.

The last bit of code that won’t change for the most part from example to example is the style for the unordered lists.

.ca-menu{

padding: 0;

margin: 20px auto;

width: 500px;

}

CSS3 Example 1

Now, let’s move on to Example 1 from the demo. In these examples, the browser specific code will not be shown in the interest of saving space, but you can find that code in the demo files. In the first example, there is a stacked menu in which the sizes of the elements and the background colors change on mouseover. The list item style is done like this:

.ca-menu li{

width: 500px;

height: 100px;

overflow: hidden;

display: block;

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 effect will be for all properties because the border color and the background color will change.

 

.ca-menu li a{

text-align: left;

display: block;

width: 100%;

height: 100%;

color: #333;

position:relative;

}

Now for the icon span, which will be placed on 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;

text-align: center;

transition: all 300ms linear;

}

The font is the web symbols and each letter is an icon. Here is how you create the wrapper for the content elements:

.ca-content{

position: absolute;

left: 120px;

width: 370px;

height: 60px;

top: 20px;

}

The font sizes will vary with a linear transition:

.ca-main{

font-size: 30px;

transition: all 300ms linear;

}

.ca-sub{

font-size: 14px;

color: #666;

transition: all 300ms linear;

}

The list elements will change by using a hover effect and you’ll see the differences in the font sizes and the colors:

.ca-menu li:hover{

border-color: #fff004;

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;

}

CSS3 Example 2

That’s all the code for the first example. Moving on to the second example, we won’t repeat all of the code that was used in the first example, but rather only the differences will be shown. The second example has animations for the content elements.

.ca-menu li:hover{

background: #e1f0fa;

}

.ca-menu li:hover .ca-icon{

font-size: 40px;

color: #259add;

opacity: 0.8;

text-shadow: 0px 0px 13px #fff;

}

.ca-menu li:hover .ca-main{

opacity: 1;

color:#2676ac;

animation: moveFromTop 300ms ease-in-out;

}

.ca-menu li:hover .ca-sub{

opacity: 1;

animation: moveFromBottom 300ms ease-in-out;

}

There are two animations in effect for example 2. The code starts by pushing the element down the Y axis by 200% with an opacity of 0. The element then goes back to the initial point of 0.

@keyframes moveFromBottom {

from {

opacity: 0;

transform: translateY(200%);

}

to {

opacity: 1;

transform: translateY(0%);

}

}

The second animation moves the top element with the same principles:

@keyframes moveFromTop {

from {

opacity: 0;

transform: translateY(-200%);

}

to {

opacity: 1;

transform: translateY(0%);

}

}

CSS3 Example 3

In the third example, the background and text color changes on hover and the icon is rotated and enlarged.

.ca-menu li:hover{

background-color: #000;

}

.ca-menu li:hover .ca-icon{

color: #f900b0;

font-size: 120px;

opacity: 0.2;

left: -20px;

transform: rotate(20deg);

}

.ca-menu li:hover .ca-main{

color: #f900b0;

opacity: 0.8;

}

.ca-menu li:hover .ca-sub{

color: #fff;

opacity: 0.8;

}

Mary Lou has seven more examples on how to tweak the code for animations and transitions for different effects. Again, the demo is here and you can download all of the code here.