sendesignz

CSS3 Transition Fundamentals

CSS3 and HTML5 are growing faster and faster, browsers begin to support more new features. CSS3 bring some interesting new presentational techniques along with it. In this post I will show you basics of using CSS3 transitions. The basic syntax for creating a css transition is “property”, “duration”, and “type”.

Property

The first new property, transition-property, specifies which property (or properties) of an element will be animated.
E { transition-property: keyword; }

Duration

The next property is transition-duration, which defines the length of time vthat the transition takes to complete. The syntax for this is:
E { transition-duration: time; }

Timing Function

To control the manner in which an element transitions between states we use the transition-timing-function property. This allows for variations in speed along the duration of the transition, which gives you control over the animation’s pace.
E { transition-timing-function: keyword; }



1. Link Transition

Interaction invitations are important to good user experience design, and CSS has supported the :hover pseudoclass for some time so that we can do some basic interaction cues on our elements.Here is the example

 a.Link{

color:#00F;

text-decoration: none;

}


a.Link:hover{

color: #F00;

}


Now with the css3 we can give the more smoother look.
a.Link{

padding: 10px;

color:#00F;

text-decoration: none;

-webkit-transition-property: color;

-webkit-transition-duration: 1s;

-webkit-transition-timing-function: ease-in;

}

a.Link:hover{

color: #F00;

}


On line 5, we specify what properties get the transition applied. In this case, we’re changing the background and foreground colors. We specify the duration of the animation on line 6, and we specify the transition’s timing function on line 7.

2. Background Transition

a.button{

padding: 10px;

border: 1px solid #000;

background-color:#000;

color:#FF0;

text-decoration: none;

-webkit-transition-property: background-color, color;

-webkit-transition-duration: 1s;

-webkit-transition-timing-function: ease-out;

}

 

a.button:hover{

background-color: #bbb;

color: #fff

}

3. Menu and Navigation

We can add the transition property to make Menu and Navigation

we can start with markup

Markup

<ul  class="navigation">

<li >

<a href="/">Home</a></li>

<li>

<a href="/">Service</a></li>

<li>

<a href="/">Solutions</a></li>

<li >

<a href="/">Contact</a></li>

</ul>

Styling with CSS

ul.navigation {

padding: 0;

margin: 0;

width: 100%;

}

 

ul.navigation li {

list-style-type: none;

display: block;

width: 100px;

border-right:1px solid #009900;

line-height:35px;

float: left;

text-align: center;

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

}

 

ul.navigation li a {

display: block;

text-decoration: none;

color:#FFF;

-webkit-transition-property: background-color, color;

-webkit-transition-duration: 1s;

-webkit-transition-timing-function: ease-out;

background-color:#a2cb03;

}

 

ul.navigation li a:hover {

display: block;

width: 100px;

line-height:35px;

text-decoration: none;

background-color: #060;

}

See the Demo

Leave your comments

Post comment as a guest

0
terms and condition.
  • No comments found