Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Working with CSS Transitions Panel

  • Dreamweaver CC has a new CSS3 transitions panel to assist you with creating CSS3 transitions
  • We will add a transition to our page using the CSS transitions panel that will create interactivity on the page using pure CSS3
  • Open the CSS transitions panel by going to Window->CSS Transitions
    • Select #tranquil and click the + sign
      • Target rule: #tranquil
      • Transition: hover, use same transition
      • Duration: 4s
      • Delay: .1s
      • Timing: ease
      • Add the following properties:
        • Left:0px
        • Top:0px
        • Width:500px
        • Height:382px
    • Put this in the browser and hover over the upper left area of the box in Chrome and Firefox
    • Now look at the code that was created, there is a hover state added and the transform property is added to the ID without the hover state
    • We can now add additional properties to this transition if we want
    • The CSS Transitions panel makes it easy to add CSS transitions to page elements

Working with CSS Transitions Panel

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • CSS 3 Transitions 0:34
    • Opening in Window Menu
  • Remove Transition 1:24
    • Options
  • Transition Functions 2:44
  • Setting Target Rule 3:54
    • Transition On
    • Setting Transition Duration, Delay
    • Timing Function
    • Adding Properties
    • Create Transition
    • Preview/Test in Browser
  • Hover State 9:08
    • Transition Coding
    • Proprietary Prefixes
    • Edit Transitions