Animation with CSS3 Transitions and Transforms

CSS3 transitions allow changes in some CSS properties over a specified period of time. Most CSS properties can be transitioned. The events which can trigger the transition are more limited, e.g.

• hover (the most common)
• click or tab into a form field
• check a radio button or checkbox
• click on a link to a fragment identifier

Examples of CSS transitions are shown at https://www.w3schools.com/css/css3_transitions.asp

To create a transition in Dreamweaver:

• Create a style rule that will serve as the original state and place the cursor in the element to be styled
• Open the CSS Transitions panel and click the + button. This will open the New Transition window (see below)

• Pick the style you created from the Target Rule dropdown
• Select one of the change states from the Transition On dropdown (e.g. hover)
• Set the duration and delay choosing either seconds or milliseconds and the Timing Function (whether it occurs in a linear fashion or not - "ease" in means it goes more slowly at the beginning
• Specify which properties to animate and their end values
• Choose where to specify the transition (as an embedded style or in an external stylesheet)
• Click Create Transition

Transition with Transform

Transforms can be made without changing the flow of text around them

• Create a transition as above
• In the property step, select Transform
• For the End value, enter the property attributes, e.g.
  • translate (25px, 50px)
  • rotate (10deg)
  • scale(2)
  • skew(25deg,10deg)
  For a list of the possibilities, see www.w3schools.com/css/css3_2dtransforms.asp and www.w3schools.com/css/css3_3dtransforms.asp If multiple properties are to be applied in a transport, they should be separated by spaces

Revised: November 13, 2017; adapted from Teri Murphy Dreamweaver student handout