LUCiD GRAFiX Logo

Tutorial
YouTube RSS Feed
Search

TUTORIAL

CSS3 Transitions

Written by Posted on May 16th, 2013 No Comments
Share This

First, lets break down all the properties that make up CSS3 Transitions:

transition-property: This is the name of the property you will be adding the transition to. transition-duration: This is the total amount of time for the duration of the transition. transition-timing-function: This is how the speed during a transition will be calculated. transition-delay: This is the amount before the start of the transition

They have a shorthand for all of these properties together as followed:

transition: width 1s linear 2s;

The above example could be broken down as followed:

transition-property: width; /*CSS property */ transition-duration: 1s; /* duration */ transition-timing-function: linear; /* How the transition will be calculated */ transition-delay: 2s; /* The amount of time before starting, by default is 0 */

A transition is added to an element and when it is hovered or another pseudo class is present.

 So let me illustrate with an example.

In this example we are using 2 transitions, 1.) is targeting the border, 2.) the other is targeting the background property. I could have said all instead of a property and it would have included all the properties of the #uniqueBox:hover.

Another example using all instead of a specific property

Welcome to Lucid Grafix!

Remember to use browser prefixes and keep in mind its not compatible on all browsers so check this site to see if you can use it on your targeted audience http://caniuse.com/css-transitions. Well for more info on CSS3 transitions check out http://www.w3schools.com/css3/css3_transitions.asp.

And as always…

Happy Coding!

About

Hi, my name is Eric Young. I’m a web designer who has worked in the IT industry since 2000. I love blogging and making the web a better place. If I'm not here I'm probably playing Gears of War. LOL

Related Articles You Might Enjoy!

How to use Emmet – SIMPLIFIED How to use Emmet – SIMPLIFIED
jquery animated menu jQuery Animated Menu
CSS3 Menu using only CSS and no JavaScript CSS3 Menu using only CSS and no JavaScript
Leave a comment

Leave a Reply