CSS3 Transitions. Transition on Active, Target, Enabled (CSS3 Training)

CSS3 Transitions. Transition on Active, Target, Enabled (CSS3 Training)

In Chapter 4 you learned about the :hover pseudo-class, which lets you change the style of a link as a visitor mouses over it. For example, the background color of a link in a navigation bar might be deep blue, but when a visitor mouses over that link, the background changes to bright orange. That change, from blue to orange, is instantaneous, but it might feel a bit abrupt to some. What if you could animate the change so that the link starts out blue and then morphs, moving through a range of colors on the way to turning solid orange. When you mouse off the link, the color would animate back from orange to blue. Now that would be cool…and, thanks to CSS3’s new CSS Transitions property, it’s easy to achieve.

In a nutshell, a CSS transition is an animation between one or more CSS properties to another set of CSS properties. Web browsers handle the animation: You only need to supply the starting point (the blue background of a link, for instance) and the ending point (the orange background). You also need to add the CSS Transition property, which, unfortunately, requires a fair amount of code. However, Dreamweaver CS6 provides a simple, straightforward tool for creating that code: the new CSS Transitions panel. Here’s how you use it:

  1. Create a style for an element on your page.

    That element can be a class, tag, ID, or any CSS selector style. The element’s style represents the beginning of the animation, and you can use a wide range of CSS properties, including background-color; background-position (Background Attachment); border-color and border-width (Adding Borders); color (Picking a Font Color); font-size (Changing the Font Size); font-weight (Aligning Text); margins (Understanding the Box Model); padding (Understanding the Box Model); width and height (Understanding the Box Model); the left, top, bottom and right position settings (Overflow); word-spacing (Block Properties); and more. (You can find a complete list of valid, animate-able properties at http://tinyurl.com/dxjbdhd, though not all browsers support all the properties.)

    If you’re creating a style for a nav button, for example, you could start with a simple class (.nav) that you apply to each link you want to animate. Or, if all the nav buttons are together inside a single div tag or unordered list, you could add a class name to the div or list tag (<ul class=“nav”, for example) then use a descendent selector (discussed on Descendent Selectors) like .nav a to style all the links.

  2. Choose Window→CSS Transitions to open the CSS Transitions panel (see Figure 8-16).

    The CSS Transitions panel lets you add, edit, and delete animations between CSS properties. It lists all the CSS transitions defined in the style sheet (or style sheets) for the currently open web page.
    Figure 8-16 The CSS Transitions panel lets you add, edit, and delete animations between CSS properties. It lists all the CSS transitions defined in the style sheet (or style sheets) for the currently open web page.

    The CSS Transitions panel lists any CSS transitions already applied to the page. You can use the panel to add new transitions or edit or delete existing ones.

  3. Click the New Transition button (the + sign).

    The New Transition window appears (see Figure 8-17).

    The New Transition window looks a bit overwhelming at first, but it’s really an easy way to create a CSS transition: identify a page element you want to animate using the Target Rule menu, specify a trigger for the animation (the “Transition on” option), choose a CSS property you want to animate, and then set some timing options.
    Figure 8-17 The New Transition window looks a bit overwhelming at first, but it’s really an easy way to create a CSS transition: identify a page element you want to animate using the Target Rule menu, specify a trigger for the animation (the “Transition on” option), choose a CSS property you want to animate, and then set some timing options.
  4. From the Target Rule menu, select the style you created in step 1.

    This menu lists all the styles in the page’s style sheet, including tag styles, class styles, IDs, and so on. It also lists any IDs applied to page elements, even if you never created an accompanying ID style, which comes in handy if you simply want to animate an element without first creating an ID style for it.

  5. From the Transition On menu, select the trigger for the animation.

    Unfortunately, you can’t just animate an element whenever you like—you’re limited to a handful of events related to CSS selectors. The :hover pseudo-class is the most well-known, but there are others you can tap into:

    • active refers to the moment you click on a link. It’s the same as the :active pseudo-class discussed on Removing a Link. Browsers also apply an active state to any time you click on an element and hold the mouse button down. In other words, you could create a CSS animation so that when a visitor clicks on a particular <div> element and holds the mouse button down, that div’s background color changes, its width increases, and its font size grows.

    • checked applies to checkboxes (Checkboxes and Checkbox Groups) and radio buttons. However, there aren’t a lot of CSS properties that apply to checkboxes and radio buttons that are worth animating.

    • disabled and enabled apply to form elements visitors can’t select or change. Since you can’t disable or enable a form element without JavaScript, you probably won’t ever need to use either of these settings.

    • focus refers to text fields in web forms. When a visitor either clicks into or tabs to a text field, that field receives what’s called “focus.” You can apply a separate set of styles to a field when it’s focused and animate the change between the look of the field as it normally appears and as it appears when a guest clicks into it to type. For example, you could set the height of a multi-line text field (also called a textarea, as described on Text Fields) to 100 pixels, and then create a CSS transition that changes the field’s height to 500 pixels. When a visitor clicks into that text box, it grows to 500 pixels high, and when the visitor tabs or clicks out of the box, it shrinks back to 100 pixels. Likewise, you could set the background color of a text field to white, but when a visitor clicks into it, the background slowly changes to bright yellow.

    • hover is the most commonly used option. It applies when a visitor mouses over an element. While you’ll commonly use the hover transition with links, you can apply it to any page element: paragraphs, div tags, headlines, and so on.

    • You probably won’t ever use the indeterminate setting. It applies only to checkboxes and radio buttons, and refers to a checkbox or radio button that is neither turned on or off. Sounds very Zen, but it’s also very useless. You can only specify the indeterminate setting using JavaScript, and since you probably won’t ever need to use the state, there’s no need to create an animation for it, either.

    • target applies to named anchors, described on Linking Within a Web Page, and it applies when a visitor clicks a link that jumps to that anchor. For example, say you add a link at the top of a page that jumps down the page to a named anchor. You could add a background color and a CSS transition to that named anchor so that when a visitor clicks the link and jumps to that spot on the page, the color fades into view.

  6. Choose either “Use the same transition for all properties” or “Use a different transition for each property.”

    As you’ll see in steps 7-9, you can set a duration for the animation (how long it takes), a delay (how long before it begins), and a “timing function” (the rate of change during the animation). You can apply the same settings to all CSS properties or set different timings for each property. For example, if, when a visitor mouses over a navigation button, you want that button to change from blue to orange, have its text grow from 16 to 25 pixels, and enlarge its border from 1 pixel to 10 pixels in width, you have a choice. You can have all three animations occur at the same rate, or set different rates for each. For example, you could have the background color change quickly, make the border change more slowly, and wait for a second before the text increases in size; to do this, you’d choose the “Use a different transition for each property” option.

    Depending on which selection you make, the next steps will vary. If you selected the “Use the same transition” option, continue to the next step. If you selected “Use a different transition,” skip to steps 10 and 11 to add a CSS property to animate, and then jump back to steps 7– 9 to set the duration, delay, and timing function for that property.

  7. Type a number in the Duration box and select either “s” (for seconds) or “ms” (for milliseconds) from the menu to the right.

    The duration specifies how long the animation takes. While it may seem cool to slowly change the background color over the course of 10 seconds, most web surfers are impatient and don’t want to wait to savor your carefully choreographed animation. A good value is .25 seconds (250 milliseconds)—that speed is fast enough for anxious visitors, but slow enough so they can see it. However, you may want to try .5 seconds (500 milliseconds) or longer to see how the effect looks.

    As mentioned in step 6, you can set different timings for each property, so you might want one animation to happen really quickly (like a change in the text size), but another (like a change in background color) to happen more slowly.

  8. Type a number in the Delay box and select either “s” (for seconds) or “ms” (for milliseconds) from the menu to the right.

    The delay value indicates how long the browser should wait before starting the animation. In general, it’s best to type 0, since waiting for any significant amount of time before starting the animation might confuse visitors. In addition, an animated transition reverses itself the moment the “trigger” stops: In other words, if a visitor mouses over a link, the animation begins, but when he moves the mouse off the link, the animation stops (even if the animation hasn’t ended) and goes back to the original CSS property. If you add a long delay, then, your visitors may never see the animation.

  9. Choose an animation speed from the Timing Function drop-down menu.

    While the duration setting indicates how long the animation takes from start to finish, the timing function (also known as an “easing” function) controls the rate of change in an animation. Normally, a CSS transition doesn’t progress at the same speed for the entire animation. That is, if you’re changing the background of a link from blue to orange, the background color will start moving toward orange slowly at first; more quickly in the middle, reaching a more orangish color rapidly; and then slowly turning solid orange at the end. Different timing functions specify different rates of change. You can get some interesting and more “natural”-looking animations with different options:

    • The cubic Bezier setting is the most complex. It requires four numbers that plot four “control points” along a line. Each point is a number from 0 to 1. In reality, all the timing functions follow what’s called a Bezier curve that plots the amount of visual change over time (if you’ve worked with a drawing program, you’ve probably used Bezier “handles” to add curves to lines). The math isn’t worth explaining (that’s just our way of saying it’s too confusing even for us), so you’re better off using an online tool to create and test different settings. The “CSS cubic-bezier Builder” tool at http://tinyurl.com/bljzsxl is particularly good. It lets you drag the control handles around and test how the animation changes over time. Once you find a curve you like, just note the four numbers and type them into the Timing Function box: for example, cubic-bezier(.17, 1, .78, .42).

    • The ease option is the normal way a transition animates: slowly at first, rapidly in the middle, and then slowly at the end.

    • The ease-in setting begins slowly at first, then picks up speed to finish the animation rapidly.

    • The ease-in-out option begins very slowly, proceeds very rapidly in the middle and ends very slowly.

    • The ease-out option begins very quickly, and then ends slowly.

    • The linear option provides a smooth animation, where every step in the show represents the same amount of progress. There’s a reason that this setting isn’t the default for animations…it’s just boring.

    To edit a transition, simply select the triggering event (hover, active, and so on) in the CSS Transitions panel, and then click the edit button. Deleting a transition is a bit more complicated, as explained next.
    Figure 8-18 To edit a transition, simply select the triggering event (hover, active, and so on) in the CSS Transitions panel, and then click the edit button. Deleting a transition is a bit more complicated, as explained next.
  10. From the Property menu (Figure 8-17) pick the CSS Property you want to animate.

    While the list is very long, there are a few properties that work particularly well. Any property that uses color, like the background-color, border-color, and color properties, are good candidates; positioning properties like left, right, top, and bottom (used with absolutely positioned elements, described in Chapter 9) also look great when animated, as do the width and height properties. Some animated properties don’t look very good or don’t work at all in most browsers. For example, while Chrome can animate a change in background-image, no other browsers can, and animating font-weight (from normal to bold, for example) doesn’t work in any browser.

    You should select a CSS property that you specified in the original selector you chose for step 4. For example, if you want to animate the background color of an element, make sure you first give the element a background color before you add a CSS transition to it. While it’s possible to animate a property without first adding that property to the beginning style (the Target selector), it sometimes produces weird results.

  11. Set the value for the property in the End Value box.

    What you add to this box depends on what property you selected. If you pick the background-color property, for example, Dreamweaver displays a color picker box; either select a color from it or type a color value into the box (see Adding Bold and Italic for more on CSS colors). If you pick a property that requires a numeric value, like width, height, margin-left, and so on, Dreamweaver displays two options: a box to enter a value and a menu for selecting a measurement unit, like px (pixels), em, or % (see Changing the Font Size for more on CSS measurement units).

    If, in step 6, you chose to set a different transition for each property, go back to steps 7– 9 to set the timing options for this particular property.

  12. Continue to add additional properties following steps 10 and 11.

    You don’t need to animate every CSS property applied to an element. Trying to add too many visual changes at once not only slows down the browser, it also probably distracts your audience. One or two animated changes is often enough to capture people’s attention.

  13. From the “Choose Where to Create the Transition” menu, select which style sheet you want to add the transition information to.

    CSS transitions are really just CSS styles, so you store them in either an internal or external style sheet. This is the same choice you make when creating any CSS style, as described on Phase 1: Set Up the Style. In general, it’s best to store the style in the same external style sheet you use for all the styles in your site.

  14. Click Create Transition.

    Dreamweaver closes the New Transition window, adds the required CSS to the page’s style sheet, and lists the animation in the CSS Transitions panel (see Figure 8-18).

Leave a Reply

Your email address will not be published. Required fields are marked *