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.
Educator.com recommends Adobe Dreamweaver CC to use with our Dreamweaver CC course. Adobe Dreamweaver CC is the leading all-in-one visual development tool used by web designers and developers worldwide to create, publish, and manage their websites and mobile content. Membership includes the full version of Dreamweaver CC to download, install, and run on your computer. You will get immediate access to all the latest updates and new features as soon as they're released.