CSS3 Transitions Pt. 2

DIGGING DEEPER:
In our last tutorial, we created a fairly simple html link/button with a pretty cool color and background-color transition, which showed us a lot about how the new CSS transition property works. Today, we’ll be expanding on the previous tutorial, so if you haven’t checked out “CSS3 Transitions Pt.1”, I suggest you take a look at it to get up to speed. We’ll see how to transition multiple properties, and dive into some animation techniques as well. The source code is available for download at the bottom of this page, but you could start from scratch if you’d like as I’ll be posting all of the code snippets as we go along. Let’s get started!

Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!

A BIT OF ANIMATION:
CSS animation is brand spanking new, but we can now use our newfound transitions to help us accomplish some pretty neat things. Our button has undergone a slight makeover, and here’s what the CSS looks like now:

.link{
	border:1px solid; 
	color:black; 
	display:block; 
	font-size:20px; 
	height:30px; 
	margin: 100px auto 0px auto;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	width:200px;
	-webkit-border-radius:10px;
	-webkit-transform-origin:0 0;
	-webkit-transform:rotate(30deg); 
}
 
.link:hover{
	color: #ffffff;
	background: #000;
}

First off, to make it more pretty, we’ve gone from red text to white text in the final phase of the transition. The red was terribly ugly, my apologies. We also went ahead and threw in some rounded corners to make it look more like a button. Secondly, we’ve used a property that we’ll discuss later, transform, to rotate our button slightly, and moved the button to a more central location in our page. Let’s go ahead and animate our button to make it rotate back to its original position, expand slightly, and fade in a drop-shadow. Sound good? Let’s take a look at the code:

.link{
	border:1px solid; 
	color:black; 
	display:block; 
	font-size:20px; 
	height:30px; 
	margin: 100px auto 0px auto;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	width:200px;
	-webkit-border-radius:10px;
	-webkit-transform-origin:0 0;
	-webkit-transform:rotate(30deg); 
	-webkit-transition-property: -webkit-box-shadow,color,background-color,height,width,-webkit-transform:rotate();
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: linear, ease-in;
}
 
.link:hover{
	color: #ffffff;
	background: #000;
	-webkit-box-shadow: 4px 5px 7px #888;
	height: 75px;
	width: 250px;
	-webkit-transform:rotate(0deg);
}

In our .link selector, we’ve added the following properties:

1. -webkit-transform-origin: This sets the origin of our rotation to 0,0. That way it only rotates from the very top left corner.


2. -webkit-transition-property: This allows us to select multiple properties to transition.


3. -webkit-transition-duration: Since we’ve selected multiple elements to transition, we need to use the longhand value to set how long the transition will take.


4. -webkit-transition-timing-function: Describes how the animation will repeat over time.

Lastly, we added a rotate transformation to our .link: hover selector, that way it rotates to the normal position when we’re hovering over it. Now, when we load up the HTML file in the browser and hover over our button, we’ll see it rotate, expand, fade in a back-color, and fade in a drop shadow as well. This was all accomplished with a bit of creativity, and an even smaller bit of CSS. In Part 3, we’ll start from scratch and build a working, small-scale solar system using CSS3. Where today we’ve simply put together a few transitions to look like an animation, our next tutorial will introduce true CSS animation using most of the transitions and transformations we learned today. See you next time!

I just signed up at Server Intellect and couldn’t be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.

Download CSS3 Transitons Part2 Source Files