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 Educator.com

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!

Methods for Expanding Transition Code

  • Our transition is pretty basic at this point on css-transitions.html
  • Let’s expand our transition to modify quite a few other properties
  • Open css-transitions-code.txt in the text file
  • We will comment out the simpler transition code, and paste in this code that contains many additional properties
  • I could add these properties using the CSS Transitions panel but I did not want you to have to watch me add all these properties
  • We are going to change the background image, round the corners, and modify a few other properties to create a more exciting transition
  • View this in the various browsers
  • You can see the large rounded corners are causing our background image to repeat
  • Add the no-repeat property to the background-repeat property and see if that fixes the issue
  • The repeat area now shows just the background color instead of the image
  • We will actually reduce the box size so the image will not repeat, this will correct the issue
  • We now have a much fancier transition occurring on the page

Methods for Expanding Transition Code

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
  • Edit Transition 0:35
    • Use Different Transitions
  • Code View 1:24
    • Select Present Transition Code
    • Comment Out
    • Copy/Paste New Code
  • No Repeat 5:19
    • Preview in Browsers
  • Animation Alternative 9:27