How to Create CSS Transitions in Dreamweaver

One of the biggest new features of CSS3 are CSS transitions. The idea of being able to implement animation effects with css is exciting, because the idea of having animations that are cross-browser compliant is fairly new. Dreamweaver has integrated a new panel, giving you the ability to enable CSS Transitions in your websites. It is fairly easy, you just have to set things up properly first.

Below, I have a basic html document. I am just going to style the background property and have it repeat, so that you can see the effect.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="transition.css" rel="stylesheet" type="text/css" />
</head>

<body>
</body>
</html>

I have created 2 small PNG files. They are both of the Twitter bird logo, and I saved them as transparent PNG files. One is red and the other is dark red. You can view the images shown below.

twitter

twit-hover

In your CSS Transitions Panel, click the “+” symbol and a dialog box will come up. In this box, you have to define the CSS rule that you are applying the transition effect to. We are applying ours to the body. Since we don’t have any css styles define yet, type “body” in the targeted rule text area, and select hover under the section called “Transition on:”.

Screen Shot 2012-08-22 at 3.23.16 AM

Next, you have to select which property that you want to place the transition on. For this tutorial, we are choosing to transition the background image. Click the + symbol and select background image from the drop down menu.

Screen Shot 2012-08-22 at 3.23.31 AM

Next, set the duration of the effect. This determines how long you would like it to take for the effect to transition. You can also set it to delay. I set this value to 1 second. You have the option to choose between seconds and milliseconds, which are typical in animation. The last option to choose from is the timing function, which determines if an item eases in, eases out, if it is linear, etc.

Screen Shot 2012-08-22 at 3.23.55 AM

The next thing that needs to be done is to select the end value. This determines what the end result of your transition is. If you don’t want to use images, you can also transition most CSS styles, such as color, width, etc. Dreamweaver will ask you in which stylesheet you’d like to create your transition. Make your choice and click create transition.

The problem is that since we had never defined a background image to start with in our stylesheet, we need to go back and specify one. Below is what the CSS looks like so far.

@charset "UTF-8";
body {
-webkit-transition: all 1s ease-in 1s;
-moz-transition: all 1s ease-in 1s;
-ms-transition: all 1s ease-in 1s;
-o-transition: all 1s ease-in 1s;
transition: all 1s ease-in 1s;
}
body:hover {
background-image: url(images/twit-hover.png);
}

We specified the hover image, but now we need to define the base image that we will start with. In the 1st body style, insert the following CSS:

background:url(images/twitter.png);

The result depends on the browser that you are using. I have found that in Firefox, the transition is subtle, and it seems to ignore the ease-in effect. It still transitions from the first image to the second one. In Safari, however, the background delays and transitions smoothly from your beginning image to your final image with an ease-in effect in place. The result is shown below:

Starting background:
Screen Shot 2012-08-22 at 3.44.34 AM

Ending Background on Hover:

Screen Shot 2012-08-22 at 3.44.49 AM

You can also go back into your CSS, even in the ones featuring the transition, and define other rules, such as background position, no-repeat, and just about any other rule you can think of. Don’t think that because you defined a transition for a specific rule that you can’t apply other rules to it. Another interesting effect for your headers(or any text) is to animate a text shadow behind it. In the example below we will change the flat text into dimensional text with a shadow transition.

The CSS on the normal state:

h2, h2 a{
	color:#CCC;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	-webkit-transition: all 2s ease-in .5s;
	-moz-transition: all 2s ease-in .5s;
	-ms-transition: all 2s ease-in .5s;
	-o-transition: all 2s ease-in .5s;
	transition: all 2s ease-in .5s;
}

The CSS when you hover over the text:

h2:hover {
	color:#9CF;
	text-shadow: -2px 2px 3px #333;
}

The result is a smooth transition from a flat body of text, to a dimensional drop shadow behind the text. See the examples below:

Normal:
Screen Shot 2012-08-22 at 3.20.05 PM

On Hover:
Screen Shot 2012-08-22 at 3.20.21 PM

The interesting thing about these transitions is that when you hover over the text, it transitions smoothly, but it also transitions smoothly back to is normal state as well. It doesn’t just jump abruptly back to the normal state, but transitions gradually back to its original state.

Conclusion

Using CSS transitions isn’t as widespread yet, due to its infancy. One thing to keep in mind is that not all CSS rules are available to transition. Dreamweaver provides the ones available, but you should also keep in mind that CSS transitions don’t display consistently across all browsers, so be sure to compensate for this so that you are left without an important style defined, such as your background. This is definitely a feature to look out for in the future, but if you want a new, interesting effect for your site, Dreamweaver can help you integrate it with the CSS Transitions Panel.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote