Creating Transitions in Dreamweaver CC

The CSS interface for Dreamweaver CC is very different from the classic look seasoned users interacted with for years. In Dreamweaver 6, CSS 3 transitions were added to Dreamweaver’s design tools. The interface works approximately the same in Creative Cloud (Dreamweaver CC).

I added a transition to a couple of images on my home page. Here’s how I did it, step-by-step.

1. Find or create a selector

I decided to apply the transition to a couple of book images. I added class="grow" to the images, so I could target them easily for the transition.

Also note, while you’re looking at the code for the image, that it is set at a width of 30%. My goal is to change that width with my transition rule.

class selectro

2. Add a new Transition and Target a Rule

In the CSS Transitions panel, I clicked the familiar plus sign to add a new transition. A dialog window opened. I’ll go through it in steps.

target rule

First, pick the target rule. Every rule you have in your style sheet is shown in alphabetical order. Like any other field in Dreamweaver, you can type directly in the field if you want instead of looking through your list of styles. I selected the .grow rule to target.

3. Transition On

The next choice is to decide when you want the transition to happen. You can see the options in the image. I picked on hover.

hover

4. Pick the timing

You can use the same transition for all properties, as I have here. You can also set different transitions for different properties if you want to have more than one transition happening in the same event.

You set the duration and delay in either seconds or milliseconds. The timing function offers ease-in, ease-out and others as well as the one I picked, linear.

duration and timing

5. Pick a property to transition

Click the plus in the Property area. As I mentioned, my goal is to change the width of the image during the transition, so I picked the property width. I set the end value to 40%.

Finally, I picked the stylesheet where I wanted it saved, and clicked Save Transition.

width

And You’re Done

That’s the transition. It’s now shown in my CSS Transitions pane. I can edit it at any time by double clicking the transition.

transitions list

This was added to my stylesheet. The necessary vendor prefixes are included.

css rule

In a browser, you see the normal display to the left, and what happens on hover to the right in this composite image.

results

You’re now ready to make transitions happen in Dreamweaver Creative Cloud.

See Also: Dreamweaver and CSS in Creative Cloud