Using the CSS Transitions Panel - Dreamweaver CS6 | HostGator Support
  1. Knowledge Base
  2. >
  3. Results
  4. >
  5. Using the CSS Transitions Panel - Dreamweaver CS6

Using the CSS Transitions Panel - Dreamweaver CS6

 

In this video, you will learn about the CSS Transitions panel which makes it easy to add impressive CSS-driven transitions to any element on the page through a single dialog. All CSS syntax is handled automatically, including vendor prefixes for all major browsers. If you prefer to hand-code your CSS syntax, the CSS Transitions panel now gives you an easy way to manage and edit transitions, regardless of where they're added.

 

Apply CSS Transitions

To apply a CSS transition to an element in Dreamweaver:

  1. In Design View, select an element to be modified.
  2. Go to the Window menu.
  3. Select CSS Transitions.
  4. Click the plus button to create new transition.In the New Transition window, you will be prompted to add the following:
    • Target Rule - allows user to type in or choose rule from drop-down menu (the drop-down list is in alphabetical order)
    • Transition On - allows the user to choose the state the transition is triggered on
    • Select Use the Same Transition for All Properties or Use Different Transitions for All Properties by clicking on the direct drop-down box.
    • Click the Plus button at the bottom of the Properties field to add a property.
    • Property - allows the user to apply a property to an element
    • Duration - allows the user to designate the time frame in which the transition will run
    • Delay - allows the user to set the time frame before the transition runs to be off set for a short period of time
    • Timing Function - allows the user to delegate the speed for the blend-in and fade-out of a transition
    • End Value - allows the user to set the maximum allowance rather than the definite sizing of an element's transition (measured in pixels)
  5. Click the Create Transition button when complete with filling out the fields.

When you switch to Live View, the new content should be functioning automatically as designated by the user.

Note: The new transition is placed at the bottom of code; however, this coded function can be moved into a like class as needed by means of the stylesheet or the CSS style panel.

What's New in Dreamweaver CS6

Dreamweaver is a popular Adobe program for creating websites and applications.  It supports HTML5, CSS3, PHP, FTP, jQuery and more; and it works with HostGator web hosting.

You can learn more about Dreamweaver by visiting Adobe's website or the video learning portal, Adobe TV.  The video in this article is courtesy of Adobe TV.