Create and apply CSS3 transitions in Dreamweaver

Create and edit CSS3 transition effects in Dreamweaver

Išči
Adobe Dreamweaver CS6 Navodila za uporabo

Na tej strani

Velja za: Adobe Dreamweaver Adobe Dreamweaver CS6

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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.

    Target Rule

    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  <hr> tags, enter hr

    Transition On

    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.

    Use the Same Transition for All Properties

    Select this option if you want to specify the same Duration, Delay, and Timing Function for all CSS properties that you want to transition.

    Use a Different Transition for Each Property

    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.

    Property

    Click  to add a CSS property to transition.

    Duration

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

    Delay

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

    Timing function

    Select a transition style from the available options.

    End Value

    The end value for the transition effect. For example, if you want the font-size to increase to 40px at the end of the transition effect, specify 40px for the font-size property.

    Choose Where To Create The Transition

    To embed the style in the current document, select This Document Only.

    If you want to create an external style sheet for the CSS3 code, select New Style Sheet File. When you click Create Transition, you are prompted for a location to save the new CSS file. After the style sheet is created, it is added to the Choose Where To Create Transition menu.

Edit CSS3 transition effects

  1. In the CSS Transitions panel, select the transition effect that you want to edit.

  2. Click  .

  3. Use the Edit Transition dialog to change previously entered values for the transition.

Disable CSS shorthand for Transitions

  1. Select  Edit > Preferences.

  2. Select CSS Styles.

  3. In Use Shorthand For, deselect Transition.