Webucator blogs about online learning and training.

In CSS3 we can create smooth transitions. Transitions take effect when the property they are applied to changes value.

For a transition to be successful you will need 4 things: an initial value, an end value, the transition itself, and something to trigger it.

Let’s look at some code:

CSS code:

#firstbox {
	width: 580px;
	padding: 9px 15px;
	background-color: #000000;
	color: white;
	margin-bottom: 20px;
	margin-top: 20px;
}

#firstbox:hover {
	background-color: #A7B526;
}

#secondbox {
	width: 580px;
	padding: 9px 15px;
	background-color: #ED8029;
	color: white;
	-webkit-transition: background-color 5s;
	-moz-transition: background-color 5s;
	-o-transition: background-color 5s;
	-ms-transition: background-color 5s;
	transition: background-color 5s;
}

#secondbox:hover {
	background-color: #ffffff;
}

HTML code:









	
This is my first box
This is my second box

If you coded both pages correctly, then your .html page should look like this:

The #firstbox code is just an id and its name is “firstbox”. It is old and rather boring. If you run the html page, you will notice that you get a basic old hover transition. The firstbox will jump from black to green when you hover over it, then change back to black when you move your mouse away from it.

The #secondbox code is where the fun begins. Run the html page and watch as the secondbox fades, or transitions, from orange to white. Pretty cool, huh?

Now, I have to address the crazy code in #secondbox. Browsers are nuts and they are making every developer’s life a living nightmare. What you see in #secondbox is what is called a “vendor prefix”. Check out a blog on vendor prefixes for more information.

To learn more about web design, consider our CSS3 Training.

Comments are closed.

© Webucator, Inc. All rights reserved. | Toll Free: 877-932-8228 | Outside the USA: 315-849-2724 | Fax: 315-849-2723