Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies
CSS3 Transitions in Dreamweaver CS6
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.
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.
- 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.
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.
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.
- 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.
*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.
| Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map
Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact