Dreamweaver CS6: Creating smooth changes with the CSS Transitions panel

When an HTML element changes state—for example, if you mouse over a link—changes to its CSS properties are instantaneous. This looks fine with links, but the effect can be very jarring if you use CSS3 transformations to scale and/or rotate elements. To smooth out the sudden jump from one state to the other, you need to apply a CSS3 transition. Although the CSS3 Transitions module is still only a working draft, it's considered stable, and is widely supported by all mainstream browsers (Internet Explorer plans to support it in IE 10). The only drawback is the need to create five versions of each style rule—one for the standard property, plus vendor-specific versions for each of the major browsers.

The new CSS Transitions panel in Dreamweaver CS6 simplifies creating a transition not only by automatically generating the style rules for each browser, but also by creating the style rule for the state at the end of the transition. In this tutorial, you'll learn how to use the CSS Transitions panel to rotate and scale images when you mouse over them. You'll also learn about new options for images in the Property inspector.

The sample files for this tutorial contain a simple web page to which you'll add three images, rotate them using the CSS3 transform property, and then use the CSS Transitions panel to rotate and scale them when moused over.

1. Download the sample files for this tutorial, and unzip them.
2. Copy the css_transitions folder and all its contents into a Dreamweaver site. There's no need to create a separate site.
3. Expand the folder. You should see the files shown in Figure 1.

4. Open transitions.html in the end folder, and click Live in the Document toolbar to activate Live view. The page should look like Figure 2.

5. Mouse over any of the images. As you mouse over an image, it smoothly scales up and rotates. If part of the image was tucked behind another, it comes to the front, as shown in Figure 3. When you mouse away from the image, it returns smoothly to its original state.

6. Test the page in any modern browser, except IE 9. It should behave the same. If you test it in IE 9, the images rotate and scale, but they jump from one state to another without a smooth transition.

The images in column on the right of the page are scaled down by adjusting the width and height in the Property inspector, and are styled to look like photographs scattered at different angles.

Inserting and scaling the images

Although you shouldn't normally use HTML to resize images, scaling them down is necessary to prevent distortion when they're scaled back up to their original size when hovered over.

1. Open transitions.html in the begin folder. The gallery <div> on the right contains only placeholder text (Figure 4).

2. Delete the placeholder text in the gallery <div> , and insert nice_seafront.jpg inside the <div> , either by selecting Insert > Image or by dragging and dropping the image from the Files panel.
3. When prompted, give it some alternate text, such as "Nice sea front."
4. With the image still selected, make sure that the padlock icon to the right of the width and height fields in the Property inspector is locked (see Figure 5). This is a new feature in Dreamweaver CS6 that preserves the aspect ratio of an image when you alter one of its dimensions.

If it's unlocked, click the icon to lock the padlock. Clicking the icon toggles it on and off.

5. Change the value in the width field of the Property inspector from 400 to 300 and press Tab or Enter/Return. The height automatically changes to 200, and two new icons appear alongside the padlock, as shown in Figure 6.

The middle icon resets the image to its original size.

The check mark icon on the right commits the new image size. Do not click this icon, because it permanently resizes the original image.

The width and height should be displayed in bold, indicating that the dimensions in the underlying HTML are different from the original image.

6. Insert nice_market.jpg and nice_oldcity.jpg in the same <div> , adding appropriate alternate text and scaling them to the same size as the first image.

Styling the images like photos

To style the images like printed photographs, you just add white as the background color, some padding, and a border.

1. Create a new CSS rule by clicking the New CSS Rule icon at the bottom of the CSS Styles panel, or by selecting Format > CSS Styles > New.
2. In the New CSS Rule dialog box, create a descendant selector to style the images in the gallery <div>. Use the following settings, and click OK:

• Selector Type: Compound
• Selector Name: #gallery img
• Rule Definition: transitions.css

3. In the CSS Rule Definition dialog box, select the Background category, and set Background-color to white.
4. In the Box category, set Padding to Same for all and enter 10px in the Top field.
5. In the Border category, leave all the check boxes selected, and set Style to solid, Width to 1px, and Color to black.
6. Click OK to close the CSS Rule Definition dialog box. The images should now be surrounded by 10px of white on all side and have a one-pixel black border (see Figure 7).

Rotating the images

The CSS3 transform property makes it easy to rotate elements. Although the property is stable and is supported by the latest versions of all mainstream browsers (including IE 9), it's officially still regarded as experimental, so it requires using vendor-specific prefixes. To rotate the images in opposite directions, you need to create two classes.

1. Create a new CSS rule by clicking the New CSS Rule icon in the CSS Styles panel or using the Format menu as before. In the New CSS Rule dialog box, use the following settings:

• Selector Type: Class
• Selector Name: rotateright
• Rule Definition: transitions.css

2. Click OK to open the CSS Rule Definition dialog box. The dialog box doesn't support the transform property. So click OK to create an empty style rule.
3. Click the All button at the top of the CSS Styles panel, and select the class you have just created.
4. In the Properties pane at the bottom of the CSS Styles panel, click Add Property, and select transform from the list of properties.
5. Expand the list in the value field, and select rotate() , as shown in Figure 8.

6. Click between the parentheses after rotate() , and type 6deg. There must be no space between the number and deg . This rotates an element 6 degrees clockwise.
7. Repeat steps 1–6 to create another class called rotateleft. This time, type ‑6deg between the parentheses after rotate() . Using a negative value rotates the element counterclockwise.
8. Right-click one of the classes you have just created, and select Go to Code from the context menu. This opens the style sheet in Split view, and positions your cursor in the style rule that you selected. The two classes should look like this:

9. Copy the transform style declaration in the rotateright class, insert a new line, and paste it four times. Then add the vendor specific prefixes for Firefox, Internet Explorer, Opera, and WebKit-based browsers (Safari, Chrome, iOS, and Android) like this:

Dreamweaver's code hints should speed up editing the style definition by presenting you with the vendor-specific prefixes as soon as you type a hyphen.

10. Do the same with the rotateleft class, which should look like this:

11. In Design view, select the first image, and apply the rotateright class to it.
12. Apply the rotateleft class to the second image, and rotateright to the last one.
13. Turn on Live view. The images should now look like Figure 9.

Although a transition is applied when an element's state changes, the recommended practice is to define the transition in the style rule that governs the element(s) in their normal state rather than in the pseudo-class that defines the new state. The new CSS Transitions panel in Dreamweaver CS6 follows this convention, but also creates the style definition for the pseudo-class at the same time.

Understanding CSS transitions

A CSS transition is a simple animation that controls the speed of transitioning from one state to another, such as when you hover over an element.

To create a CSS transition, you specify how long the transition should take (in seconds or milliseconds), and how long a delay there should be (if any) before the transition starts. You also specify what's called a timing function, which controls the speed of the transition as it progresses. The timing function expects one of the values listed in Table 1.

Table 1. Timing functions for CSS transitions

Using cubic-bezier() as an option requires a specialist knowledge of cubic-bézier curves. The other keywords are sufficient for most purposes. If you have used Flash, the concept of easing will be immediately familiar. If you're new to the concept, just experiment with the different settings to see which you prefer. The default is ease .

When specifying a transition, you can apply the same values to all properties or different values to each one. Although many properties are animatable, some are not. For example, you can change the height , width , and opacity of an element, but not its display property. Similarly, you can animate the top , left , bottom , and right properties, but not the position property.

To make working with transitions easier, Dreamweaver's CSS Transitions panel lists only properties that are currently known to be animatable. So, if a property isn't listed, it's almost certainly not animatable.

Using the CSS Transitions panel to apply a transition

By default, the CSS Transitions panel is not displayed, so you need to open it before you can use it to apply a transition.

1. Open the CSS Transitions panel by selecting Window > CSS Transitions. The panel is blank when it first opens (see Figure 10).

2. Select one of the images in the gallery <div> . Although it's not essential to select the target element(s) beforehand, I have found it useful in my tests, because Dreamweaver occasionally applies the transition to whatever's selected in addition to the settings you create.
3. Click the plus button at the top left of the CSS Transitions panel to open the New Transition dialog box (see Figure 11).

4. The Target Rule field is where you specify the style rule that controls the element(s) in their normal state. You can either type the CSS selector directly into the field, or you can select it by clicking the down arrow on the right. This displays a list of all CSS selectors in your style sheet.

You want to apply the transition to all the images in the gallery <div> , so click the down arrow and select #gallery img.

5. The Transition On drop-down menu lists all the pseudo-classes that can be used to trigger the transition. Select hover from the list.
6. The next drop-down menu gives you the option to use the same transition settings for all properties or to use different settings for each one. For example, you might want to increase the font size of some text before changing its color. By choosing different settings, you can delay the color transition to start after the font size transition has ended. In this case, though, the default "Use the same transition for all properties" is fine.
7. In the Duration field, type 0.5. By default, Dreamweaver uses s (seconds) as the unit of measurement, so this sets the duration of the transition to half a second.
8. In the Delay field, type 0.2. This delays the start of the transition by one-fifth of a second, which will prevent the transition from being triggered if someone moves the mouse pointer over an image and immediately moves it away.

NOTE: The drop-down menus to the right of the Duration and Delay fields also have ms as an option. This sets the value in milliseconds (one-thousandth of a second).

9. Set Timing Function to ease-out. This slows down the transition towards the end.
10. Click the plus button beneath the Property pane, and select transform from the long list that appears. If necessary, click the down arrow at the bottom of the list to scroll to transform .
11. This activates the End Value field, which is where you specify the value you want the property to have at the end of the transition. Type rotate(0deg) scale(1.33) in the End Value field. This resets the rotation of the image to zero degrees and scales it up by one-third. In other words, the image is scaled back up to its original size.

NOTE: Instead of using the transform property to scale the image, you could add the width and height properties to the Property pane, and set the end values to 400px and 266px respectively. However, using the transform property to rotate and scale the images in the same operation is simpler.

12. Click Create Transition to close the New Transition dialog box. The CSS Transitions panel now lists #gallery img with 3 instances of a hover transition, as shown in Figure 12.

13. Turn on Live view, and mouse over the images. The images rotate and scale smoothly, but they don't come to the front if another image overlaps them. Also, they disappear off the right edge if the Document window isn't wide enough (see Figure 13). This is because the transform property rotates elements from the center.

14. Before fixing these problems, click transitions.css in the Related Files toolbar to examine the changes to the style sheet. The #gallery img style rule now looks like this:

Dreamweaver has added the transition property with all the necessary vendor-specific prefixes.

At the bottom of the style sheet, there's a new style rule that looks like this:

This controls the state of the images at the end of the transition. Because the transform property requires vendor-specific prefixes, Dreamweaver has added them automatically, saving you a lot of work.

To fix the problem with the images not coming to the front, you need to use relative positioning, and change the z-index property when the image is hovered over. The other problem of the images being cut off on the right can be fixed by using the transform‑origin property, which specifies the anchor point of a transformation.

1. Select the #gallery img style rule in the CSS Styles panel, and click the Edit Rule icon at the bottom of the panel to open the CSS Rule Definition dialog box.
2. Select the Positioning category, and use the following settings:

• Position: relative
• Z-Index: 1

3. Select the Block category, and set Display to block.
4. Click OK to close the CSS Rule Definition dialog box.
5. The CSS Rule Definition dialog box doesn't support the transform-origin property, so the easiest way is to work in Code view with the help of code hints. Edit the rotateright and rotateleft class definitions like this:

This anchors the rotation and scaling of the rotateright class to the top-right corner of the image, and of the rotateleft class to the bottom-right corner. Note that the horizontal keyword must precede the vertical one.

6. In the CSS Transitions panel, select hover, and click the Edit Selected Transition icon, as shown in Figure 14.

NOTE: If the CSS Transitions panel is blank, click anywhere in Design view to restore the focus to the HTML page.

This opens the Edit Transition dialog box, which is the same as the New Transition dialog, except that the options to change the Target Rule, Transition On, and style sheet are grayed out.

7. Click the plus button beneath the Property field, and select z-index from the list.
8. Type 10 in the End Value field.
9. Click Save Transition.
10. Test the page in Live view. The images now come to the front and rotate around the top-right or bottom-right corner when you mouse over them. When you mouse away, the images return to their original position behind overlapping images. This is because the z-index property is increased to 10 on hover, but returns to 1 in the normal state.
11. There's just one problem: changing the transform-origin property has made the images look untidy in their normal state.

Amend the rotateright and rotateleft classes to add a margin-top of 20px and -40px respectively.

12. The latest versions of all browsers support the transform property, but older versions of Internet Explorer still have a large market share. To adjust the top margin of the images in IE 6–8, add the following Internet Explorer conditional comment just before the closing </head> in transitions.html:

The images won't be rotated in IE 6–8, but they'll be displayed with a 20-pixel gap between each one.

If you decide to remove a CSS transition, select it in the CSS Transitions panel, and click the minus button at the top-left of the panel. This opens the dialog box shown in Figure 15.

Resist the temptation to accept the defaults without checking them. The options for Remove Target Rule allow you to remove the entire rule or just the transition properties. If you select the Entire rule radio button, the whole #gallery img style rule will be removed from transitions.css. Normally, you would want to remove only the transition properties. However, if you have applied multiple transitions to the same element(s), you might want to preserve the transition values, in which case you should deselect the Remove Target rule check box.

Selecting the Remove Transition On rule(s) check box removes the pseudo-class style rule that sets the values for the end of the transition. In this example, it would remove the #gallery img:hover style rule.

The Remove class from element(s) check box is grayed out in Figure 15 because the example in this tutorial uses a descendant selector as the target rule. However, if you use a class as the target rule, this gives you the option to remove the class from the element(s) when deleting a transition.

The CSS Transitions panel adds the transition property to the style rule that controls the normal state as well as creating the pseudo-class that controls the end state, all in a single operation. However, there are occasions when you might want to create the transition independently of the pseudo-class, for example if you want to use a parent element to trigger a transition. To deal with such situations, there's a new Transition category in the CSS Rule Definition dialog box, as shown in Figure 16.

The options are identical to the New Transition dialog box in the CSS Transitions panel. However, they set only the transition. You need to create the pseudo-class for the end of the transition separately.

The CSS Transitions panel in Dreamweaver CS6 makes it easy to smooth the change from one state to another, such as when hovering over an image, without the need for JavaScript. The panel builds all the CSS style rules for both the transition and the end state. It also simplifies editing and removing the style rules cleanly. For more complex transitions, you can use the new Transition category in the CSS Rule Definition dialog box.

To learn more about CSS3 transitions, you might find the following resources helpful:

• CSS3 Transitions specification
• Browser support for CSS transitions
• Browser support for CSS transforms
• A List Apart: Understanding CSS3 Transitions
• CSS3 Transitions without Using :hover
• Original Hover Effects with CSS3 (advanced uses of CSS3 transitions)
• Online cubic-bézier curve tool