beautypg.com

Css3 transition effects, Create and apply css3 transition effect – Adobe Dreamweaver CC 2014 v.13 User Manual

Page 170

background image

CSS3 transition effects

To the top

Target Rule

Transition On

Use the Same Transition for All Properties

Use a Different Transition for Each Property

Property

Duration

Delay

Timing function

You can create, modify, and delete CSS3 transitions using the CSS Transitions panel.

To create a CSS3 transition, create a transition class by specifying values for the transition properties of the element. If you select an element
before creating a transition class, the transition class is automatically applied to the selected element.

You can choose to add the generated CSS code to the current document or specify an external CSS file.

Create and apply CSS3 transition effect

1. (Optional) Select an element (paragraph, heading, and so on) to which you want to apply the transition. Alternatively, you can create a

transition and apply it later to an element.

2. Select Window > CSS Transitions.

3. Click .

4. Create a transition class using the options in the New Transition dialog box.

Enter a name for the selector. The selector can be any CSS selector such as a tag, a rule, an ID, or a compound selector. For

example, if you want to add transition effects to all


tags, enter hr.

Select a state to which you want to apply the transition. For example, if you want to apply the transition when the mouse

moves over the element, use the hover option.

Select this option if you want to specify the same Duration, Delay, and Timing Function for all

CSS properties that you want to transition.

Select this option if you want to specify a different Duration, Delay, and Timing Function for

each of CSS properties that you want to transition.

Click to add a CSS property to transition.

Enter a duration in seconds (s) or milliseconds (ms) for the transition effect.

The time, in seconds or milliseconds, before the transition effect starts.

Select a transition style from the available options.

163

This manual is related to the following products: