Tuesday 7 February 2012
Facebook StumbleUpon Twitter Google+ Pin It

How To Use CSS3 for Menu Transitions and Animations


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>
<li>
<a href="#">
<span>A</span>
<div>
<h2>Exceptional Service</h2>
<h3>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. 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;

}

No comments: