Enhancing HTML page designs with CSS transitions in Adobe Dreamweaver CS6

The CSS Transitions panel in Dreamweaver CS6 offers many new possibilities to enhance user interfaces. The transitions you create are pure CSS3 code, so animations load quickly. And creating transitions is easy; you select a rule to target, choose an event, and then set the animation options to create unique effects.

In this article, I show you how to add CSS3 transitions to form elements with Dreamweaver CS6. If you haven't already installed Dreamweaver, download it and install the free trial software on your machine. You can also use your Creative Cloud membership to download and install the product.

Then download the sample files (ZIP, 100 KB), uncompress the archive, and save the CSS-transitions folder on your desktop. The sample files folder contains two versions of a contact page (a starter page and a completed version) along with an Images folder.

Before you begin, follow these steps:

1. Launch Dreamweaver and choose Site > New Site.
2. In the Site Setup dialog box, type CSS Transitions as the Site Name. Click the Folder icon to the right of the Local Site Folder field and browse to select the CSS-transitions folder on your desktop (see Figure 1).

3. Click Save to close the Site Setup dialog box and save the new site.

Now the site is defined, and you are ready to begin working with the sample files.

The sample files folder contains two HTML files: contact.html and contact-complete.html. To follow along with these instructions, open the contact.html file. Or if you'd prefer, you can open contact-complete.html to review the finished version.

In this section, you'll add your first CSS transition to a form element to animate the border. This transition highlights each of the text fields when they are active:

1. In the Files panel, double-click contact.html to open it. Click the Split button to see both Code view and Design view.
2. Choose Window > CSS Transitions to open the CSS Transitions panel. Click the Plus button to create a new transition. The New Transition dialog box appears.

   The Contact page contains several form elements. Each form element ID has a CSS rule that corresponds to the labeled item in the form. You need to apply one of these rules to the transition.

3. Choose #name from the Target Rule pull-down menu. Attach the transition to the rule that is associated with the Name field (see Figure 2).

Note: In addition to selecting an existing rule from the Target Rule menu, you can also create a transition for a new rule that doesn't exist yet. Enter the name of the new rule in the Target Rule field. After you create the transition, you can apply the new rule to an element on the page using the Property inspector.

4. Choose Hover from the Transition On menu (see Figure 3).

5. Ensure that the Use The Same Transition For All Properties option is selected from the pull-down menu below the Transition On field. This setting ensures that all the properties you add in this transition will play back using the same duration, delay, and timing function settings. If you choose the second option — Use A Different Transition For Each Property — you can control the animation of each property individually with its own specific settings.
6. In the Duration field, enter 1 second. The value you specify in the Duration field sets the length of time (in seconds) the transition will play. By default, the Duration field is set to seconds, but you can also change the duration measurement to milliseconds for more precise control.
7. Leave the Delay field blank. The value you enter in the Delay field sets the pause or amount of time the animation will wait before it begins playing once the event has occurred (in seconds or milliseconds). For this effect, the transition should begin playing immediately, so you want to leave the Delay field blank.
8. Choose Ease-In from the Timing Function menu. The Timing Function options describe how the intermediate values used during a transition will be calculated. This feature enables a transition to change speed as it plays over its duration. These effects are commonly called easing functions. By choosing Ease-In, you ensure the transition starts out slowly and then speeds up as it comes to the end of its duration (see Figure 4). You can choose from a range of easing options to control how the motion plays back. You can also create interesting effects by setting up transitions that do not render at the same consistent pace.

As you work with transitions, it's helpful to experiment with different values for the Duration, Delay, and Timing Function settings to find the best combination for each effect.

9. In the Property section, click the Plus button to add a property. Notice that the list of CSS properties you can add is extensive. You can press a letter on your keyboard to quickly jump to a section in the list alphabetically. Choose Padding-Left, and in the End Value field, enter 10 pixels (see Figure 5).

10. Click the Plus button again and choose Background-Color. In the End Value field, click the color chip and choose a light yellow color, such as #FFC (see Figure 6).

Note: Since the Use The Same Transition For All Properties option is enabled, the Duration, Delay, and Timing Function fields remain consistent when you add the second property.

The options for this transition are ready. For now, leave the bottom menu set to This Document Only. But notice that you can save the CSS transition code you create in an external style sheet if you'd like.

11. Click Save Transition to close the CSS Transitions panel.

After you add a transition, it is always a good idea to preview how it looks in a browser before continuing to edit the page:

1. Choose File > Preview In Browser and then select the name of the browser you prefer to test. The Contact page opens in a new browser window.
2. Hover your cursor over the Name field. Notice that the field's default value, the words "Your Name," animate 10 pixels to the right while the background color turns light yellow (see Figure 7).

As you roll the cursor away, the transition animates back to the starting property values. If you type a name in the field and hover over it, the text you enter also transitions using the same properties. If you'd like to reset a form to its initial display state, click the Submit button.

Now you need to create two more transitions that are triggered with two different events:

1. Return to Dreamweaver and the CSS Transitions panel.
2. Click the Plus button to create another transition. Or if you prefer, choose Create New Transition from the panel's option menu.
3. In the New Transition dialog box, choose #email from the Target Rule menu.
4. Choose Focus from the Transition On menu. The first transition you set up appears when a cursor hovers over the field; this time the transition will appear any time the visitor clicks or tabs to select the Email field.
5. Ensure that the Use The Same Transition For All Properties option is selected from the pull-down menu below the Transition On field.
6. Enter the following settings to control how the transition will play:
   • Duration: 1
   • Delay: Leave this field blank
   • Timing Function: Linear
7. In the Property section, click the Plus button and add the Background-Image property.
8. Click the Folder icon to the right of the End Value field and select the file named star.png in the Images folder (see Figure 8).

9. Click Save Transition to save it and close the CSS Transitions panel.
10. Save the Contact page and preview the page in a browser. Select the Email field to see how the image looks. The image appears as long as the field is in focus, whether you click it or press the Tab key.

So far you've created two transitions: one that appears on hover and one that appears when the field is in focus. You need to create one more transition and apply it to the Message area. When you choose the Active event, the transition only appears while the visitor clicks and holds the mouse button over the element:

1. Return to Dreamweaver and click the Plus button in the CSS Transitions panel to add a new transition.
2. Choose #message from the Target Rule menu.
3. Set the Transition On menu to Active.
4. Ensure the Use The Same Transition For All Properties option is selected.
5. Set the following display options:
   • Duration: 1
   • Delay: Leave this field blank
   • Timing Function: Ease-In
6. Add the Outline-Color property and set the End Value color to dark gray #333.
7. Add the Outline-Offset property and set the End Value to 1 pixel.
8. Add the Outline-Width property and set the End Value to 3 pixels.
9. Click Save Transition to save these changes and close the dialog box (see Figure 9).

10. Save the Contact page and preview it in a browser. Notice that when you press and hold the mouse button down over the Message field, a dark gray border animates from the edge of the field.

The transitions are all playing as expected, but after viewing the results, you might want to make a few changes.

Once you have set up your transitions, you may want to adjust them. In this section, I show you several strategies for updating the settings to adjust how transitions appear.

To adjust the settings using the CSS Transitions panel, follow these steps:

1. Return to Dreamweaver and the CSS Transitions panel. The CSS Transitions panel shows the list of transitions. Notice that if you have multiple transitions and you want to collapse the list to make it easier to navigate, you can click the arrow button to the left of each rule to show and hide the transition hierarchy.
2. Double-click input#name to open the Edit Transition dialog box. Or if you prefer, select input#name and click the Edit Selected Transition button (Pencil icon).

   Using this interface, you can make changes to the existing settings. It is not necessary to delete a transition and re-create it from scratch unless you need to change the targeted rule or the event that causes the transition to play.

   Note: If desired, you can delete a recently added transition by choosing Edit > Undo. You can also select the event that triggers each transition and press the Minus button to remove the transition's pseudo-class.

3. Select the Padding-Left property and change the End Value field to 15 pixels (see Figure 10).

4. Click Save Transition to close the Edit Transition dialog box.
5. Save the Contact page and preview the page in a browser again. Now when you interact with the Name field, the updated transition moves 15 pixels to the right. Because it has farther to go, the animated text appears to move more quickly.

Now imagine that you want to make a change to the transition applied to the Message field. This time, you use the CSS Styles panel:

1. Return to Dreamweaver and choose Windows > CSS Styles to open the CSS Styles panel.
2. In Design view of the Document window, click the Message field to select it.
3. In the CSS Styles panel, click the Current tab at the top to see the current style in the Properties pane.
4. Click the color chip for the Outline-Color rule. Use the color picker that appears and choose a dark red color swatch #930 (see Figure 11).

You've just updated the transition settings using the CSS Styles panel. And if you'd like, you can click the Add Property link in the Properties pane to add additional properties. But there's also one other way you can adjust transition settings.

5. In the CSS Styles panel, scroll up in the list of rules applied to the Message field and choose the "-webkit-transition" rule. Click the Edit button (Pencil icon) at the bottom of the CSS Styles panel (see Figure 12). The CSS Rule definition dialog box appears.

6. Select the Transition category in the left column and then update the Duration field to 2 seconds (see Figure 13).

7. Click OK to save the changes.
8. Save the page and preview it to test the transitions with the new settings.

As you can see from this quick example, the CSS Transitions panel is intuitive to use. The CSS3 code you generate when you create transitions can be edited just like any other rule you create in Dreamweaver. And you have a great deal of control when defining how transitions appear, even down to the millisecond.

Mobile browsers and web browsers both support CSS transitions, so experiment with using CSS transitions in all your projects to provide compelling experiences across a wide range of screens.

For more information, check out the CSS transitions, transforms, and animation tutorial on Rich Bradshaw's site for helpful visual demonstrations and explanations of easing, events, and transformation properties.