CSS3 Transitions in Dreamweaver CS6

With the addition of HTML5 and CSS3, interactive websites are becoming the expected. Now, with Dreamweaver^R CS6 and the new CSS Transitions panel, you can create your own interactive effects without the need to write any code. The output from this process is CSS3 only, with no JavaScript. Therefore, you don't need to worry if the viewer has enabled JavaScript. The transitions created by Dreamweaver can play in any modern web browser.

Let's see how easy it is to create our own interactive transitions. The transition can be applied to any class, ID or CSS element. All we need to do is set the values in the CSS Transitions panel.

Our first step is to select the element to which we wish to apply the transition. In our example it will be a menu link.
Click Window - CSS Transitions to open the panel.
In the CSS Transitions panel, click the Plus sign to add a transition.
In the New Transition dialog box, we can use the Target Rule menu to choose from the presets or type in our own name for the transition. Let's type in the name .morph.
Next we need to choose the action that will trigger the transition. From the Transition On menu, choose Hover so that the transition will trigger when we place our mouse over the link. Other choices include: active, checked, disabled, enabled, focus, hover, indeterminate and target.
For the Menu Option, we have two choices. Let's choose the first.

Use the same transition for all properties
Use a different transition for each property
For the Duration and Delay of the transition, we can use Seconds or Milliseconds. Let's set the Duration to 1 second and the Delay to .05 second.
For the Timing Function, we have several easing choices. Let's choose Ease Out.
To add a CSS Property, click the Plus sign and choose one from the pop-up list. Let's choose Background-Color.
Once we have chosen a Property we can set the End Value for the transition. Depending on the Property we have chosen, the End Value menu will give us the corresponding menu for that Property. For the Background-Color we get the Color Picker. If we add the Font-Weight property, we get a menu of preset weights.
Finally we need to choose Where to Create the Transition. Our choices are This document only or New Style Sheet File. Let's use the first.

Once we click the Create Transition button, we can see that the transition has been listed in the CSS Transitions panel, indicating that the morph transition will be triggered by the hover action and applied to the a.morph target.

If we check the code view, we see the morph class has been added to the link.

When we pass our mouse over the link in Live view, the background color will change.

But what if we needed to edit the transition? We can do this via the CSS Transitions panel.

Select the a.morph transition and the Edit icon will become active (pencil icon).
Click the Edit icon to open the Edit Transition dialog box. Here we can change the values as needed or add a new Property and End Value.

Now that we have the morph transition created, we can easily apply it to other elements because it is now available from the Target Rule menu.

*Adobe provided a copy of this software to me for review purposes.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.

|

	Diane Cipollo BellaOnline's Flash and Animation Editor