Home > Chapter Review and Exercises > Chapter 18 - Transitions, Transforms, and Animation > Chapter 18 Exercises

Animated interactive effects

1. Follow the instructions on pages 525-526 and 532-533 of the Class Text.

2. I have already created a folder in your Ch18 folder with the necessary files you will need to edit. 

3. Note that Exercises 18-1 and 18-2 are in separate folders.

4. You will start by editing the exercise_18-1.html file in the Exercises 18-1 folder.

5. As reference, the Chapter 18 textbook slides are in the Class Textbook and Resources section.

Read the summary, takeaways, key terms, and do the self test in the Chapter 18 section of Supplemental Resource Materials

In your Class folder, in the Ch 18 folder, open the Exercise 18-1 subfolder.  You will then open the exercise_18-1.html file in your text editor.  In this exercise, you are going to create the rollover and active states for a menu link with animated transitions as shown below:

If you look at exercise_18-1.html file in your text editor, you will notice that the unordered menu list has been converted into a horizontal menu with Flexbox.  The display: flexbox; property has been added to the ul selector:

ul {

  list-style-type:none;

  margin: 0;

  padding: 0;

  display: flex;

}

Just a quick reminder, the parts of a CSS selector are shown below:

Next, notice that the a element has been set to display as a block element, underlines are turned off, dimensions and padding are applied, and the color, background color, and border are all established.  The box-shadow property is used to make it look as though the links are floating off the page.

Notes about three of the properties shown below:

• • display: block;   <---- the <a> element has been set to display as a block element

  • text-decoration: none;    <---- the <a> element underlines are turned off (they normally are on)

  • box-shadow: 0 4px 2px rgba(0,0,0,.5);   <---- The box-shadow property makes it look as though the links are floating off the page

For a quick refresher on RGBA color values from Chapter 13, page 309, check out these w3schools.com links:

• https://www.w3schools.com/css/css3_colors.asp

• https://www.w3schools.com/css/tryit.asp?filename=trycss3_color_rgba

a {

  display: block;

  width: 6em;

  margin: 0 5px;

  padding: .5em 1em;

  text-decoration: none;

  text-align: center;

  letter-spacing: .1em;

  color: #fff;

  background-color: rgb(190, 190, 190);

  border: 2px solid rgb(175,175,175);

  border-radius: 6px;

  text-shadow: #666 .1em .1em .1em;

  box-shadow: 0 4px 2px rgba(0,0,0,.5);

}

Step 1

When the user puts their mouse pointer over a link, or tabs over to the link, the background color needs to change to green (#c6de89), and the border color must change to a darker shade of green (#a3c058).  Below the <a> selector, add a new selector for these hover and the focus state styles.

a {

  display: block;

  width: 6em;

  margin: 0 5px;

  padding: .5em 1em;

  text-decoration: none;

  text-align: center;

  letter-spacing: .1em;

  color: #fff;

  background-color: rgb(190, 190, 190);

  border: 2px solid rgb(175,175,175);

  border-radius: 6px;

  text-shadow: #666 .1em .1em .1em;

  box-shadow: 0 4px 2px rgba(0,0,0,.5);

}

a:hover, a:focus {   

  background-color: #c6de89;  /* light green  */

  border-color: #a3c058;      /* darker green */

} 

Step 2

When the user clicks the link (a:active), make it move down by 3 pixels as though it is being pressed.  You can do this by setting the a element’s position to relative and its top position to 0px .  Then change the value of the top property for the active state (a:active) to 3 pixels away from the top edge (in other words, down).  This requires adding the properties position: relative; and top: 0px; to the end of the a selector.  And you must also create a new selector below that, that sets the top position to 0px when the a selector is active:

a {

  display: block;

  width: 6em;

  margin: 0 5px;

  padding: .5em 1em;

  text-decoration: none;

  text-align: center;

  letter-spacing: .1em;

  color: #fff;

  background-color: rgb(190, 190, 190);

  border: 2px solid rgb(175,175,175);

  border-radius: 6px;

  text-shadow: #666 .1em .1em .1em;

  box-shadow: 0 4px 2px rgba(0,0,0,.5);

  position: relative;

  top: 0px;

}

a:hover, a:focus {   

  background-color: #c6de89;  /* light green */

  border-color: #a3c058;     /* darker green */

}

a:active {

  top: 3px;

}

Step 3

When the user clicks the link (a:active), the button appears to be pressed down, but then there is less room for its shadow.  Reduce the box-shadow distance when this happens:

a:hover, a:focus {   

  background-color: #c6de89;  /* light green */

  border-color: #a3c058;     /* darker green */

} 

a:active {

  top: 3px;

  box-shadow: 0 1px 2px rgba(0,0,0,.5);

}

Step 4

Save the exercise_18-1.html file and give it a try in a browser.  The links should turn green and move down when you click or tap them.

Here is how the Exercise 18-1 website should respond at this point:

Step 5.A

 To enhance the experience by adding some smooth transitions, make the background and border color transition ease-in over a period of 0.2 seconds, and see how that changes the experience of using the menu.  Use the shorthand transition property and use the default ease timing function at first so we can omit that value.

NOTE: To learn more about the transition-timing-function, refer to page 520.

Add the transition property with the background-color 0.2s, and the border-color 0.2s;  properties.

a {

  display: block;

  width: 6em;

  margin: 0 5px;

  padding: .5em 1em;

  text-decoration: none;

  text-align: center;

  letter-spacing: .1em;

  color: #fff;

  background-color: rgb(190, 190, 190);

  border: 2px solid rgb(175,175,175);

  border-radius: 6px;

  text-shadow: #666 .1em .1em .1em;

  box-shadow: 0 4px 2px rgba(0,0,0,.5);

  position: relative;

  top: 0px;

  transition:  

    background-color 0.2s,

    border-color 0.2s; 

}

Step 5.B

Save the exercise_18-1.html file, open it in a browser, and try moving your mouse over the links.

Here is how the Exercise 18-1 website should respond at this point:

Step 6. Try some other duration values. 

Step 6.A

See if you can still see the difference with a 0.1s duration. 

  transition:  

    background-color 0.1s,

    border-color 0.1s; 

}

Step 6.B

Now try a full second (1s).  I think you’ll find that 1 second is surprisingly slow.

  transition:  

    background-color 1s,

    border-color 1s; 

}

Step 6.C

Set the duration back to 0.2 seconds.

  transition:  

    background-color 0.2s,

    border-color 0.2s; 

}

Step 7.A (part 1 of 3 parts)

Add a transition to the downward motion of the link when it is clicked or tapped.  Transition both the top and box-shadow properties because they should move in tandem.  Start with a 0.2s duration like the others.

NOTE:  Don't for get to change the semicolon on this line to a comma when you add those two extra values below it:  

border-color 0.2s,

a {

  display: block;

  width: 6em;

  margin: 0 5px;

  padding: .5em 1em;

  text-decoration: none;

  text-align: center;

  letter-spacing: .1em;

  color: #fff;

  background-color: rgb(190, 190, 190);

  border: 2px solid rgb(175,175,175);

  border-radius: 6px;

  text-shadow: #666 .1em .1em .1em;

  box-shadow: 0 4px 2px rgba(0,0,0,.5);

  position: relative;

  top: 0px;

  transition:  

    background-color 0.2s,

    border-color 0.2s,

    top 0.2s, 

    box-shadow 0.2s; 

}

Step 7.B (part 2 of 3 parts)

Save the exercise_18-1.html file, open it in a browser, and try clicking the links.  That transition really changes the experience of using the menu.  The buttons feel more difficult to “press".

Step 7.C (part 3 of 3 parts)

Try a very short transition such as 0.1 second so the buttons appear to be sluggish.

  transition:  

    background-color 0.2s,

    border-color 0.2s,

    top 0.1s, 

    box-shadow 0.1s; 

}

Step 8

Increasing the duration made the menu uncomfortable to use.  Try adding a short 0.5-second delay to the top and box-shadow properties.

a {

transition:

background-color 0.2s,

border-color 0.2s,

top 0.1s 0.5s,

box-shadow 0.1s 0.5s;

}

Step 9

Save the exercise_18-1.html file, open it in a browser, and try clicking the links.    That little bit of extra time (0.5 seconds) makes the whole thing feel broken.  Timing is everything!

Read the summary, takeaways, key terms, and do the self test in the Chapter 18 Resource Material page.

Step 1

Open the Exercise 18-2 folder in the Ch 18 folder in your Class folder.  Using the CSS Transforms that were discussed in the pages of the text leading up to this exercise, you will make the travel photos in the gallery grow larger and spin out to an angle when your mouse moves over them in a smooth transition.   Open the exercise_18-2.html in a text editor.  The styles that arrange the list items horizontally and apply a slight drop shadow are there.  The first thing you will do, is to add the transform property for each image.

Step 2.A

The transforms need to take effect only when the mouse is over the image or when the image has focus, so the transform property should be applied to the :hover and :focus states.  Each image will tilt a little differently, so each will have its own transform rule, using a unique ID as the selector.  Below the img selector, and above the </style> closing tag, add the selectors shown below:

img {

  width: 200px;

  height: 150px;

  box-shadow: 2px 2px 2px rgba(0,0,0,.4);

}

a:hover #img1, a:focus #img1 {

  transform: rotate(-3deg);

} 

a:hover #img2, a:focus #img2 {

  transform: rotate(5deg);

} 

a:hover #img3, a:focus #img3 {   

  transform: rotate(-7deg); 

} 

a:hover #img4, a:focus #img4 {  

  transform: rotate(2deg); 

}  

</style>

Step 2.B

Save your work, and open exercise_18-2.html in Chrome (not Edge or Internet Explorer).  

As you hover over the pictures, they should tilt, the first to the left, the second to the right, the third to the left, and the fourth to the right.

 Step 3.A

Make the images a little larger so they are easier to see.  Add scale(1.5) to each of the transform values.

img {

  width: 200px;

  height: 150px;

  box-shadow: 2px 2px 2px rgba(0,0,0,.4);

}

a:hover #img1, a:focus #img1 {

  transform: rotate(-3deg) scale(1.5);

}

a:hover #img2, a:focus #img2 {

  transform: rotate(5deg) scale(1.5);

}

a:hover #img3, a:focus #img3 {

  transform: rotate(-7deg) scale(1.5);

}

a:hover #img4, a:focus #img4 {

  transform: rotate(2deg) scale(1.5);

}

</style>

Step 3.B

Save your work, and open exercise_18-2.html in Chrome (not Edge or Internet Explorer).  As you hover over the pictures, they should tilt like before,, but now they enlarge.

NOTE: The four image files used here were created at a larger size than the thumbnail sized images displayed in the website.  If the images had been created small, and then enlarged on the website, they would loose their resolution (they would look terrible).

Step 4.A

Did you notice the drop shadows behind the pictures?  A drop shadow gives it a 3D like effect.  To make it look even better, make the drop shadow appear to be a little farther away by increasing the offset and blur, and lightening the shade of gray.  All images should have the same effect, so add one rule using a:hover img as the selector.  

Remember: The a:hover img selector means the properties of this selector will only be applied to img elements  that are included in a element that are in a hover state.  In the exercise_18.2html document, these are as follows:

<li><a href=""><img src="images/anchovies.jpg" id="img1" alt=""></a></li>

<li><a href=""><img src="images/jellyfish1.jpg" id="img2" alt=""></a></li>

<li><a href=""><img src="images/bluejellyfish.jpg" id="img3" alt=""></a></li>

<li><a href=""><img src="images/seadragon.jpg" id="img4"alt=""></a></li

Here (in bold) is the additional CSS you will need to add:

img {

  width: 200px;

  height: 150px;

  box-shadow: 2px 2px 2px rgba(0,0,0,.4);

}

a:hover #img1, a:focus #img1 {

  transform: rotate(-3deg) scale(1.5);

}

a:hover #img2, a:focus #img2 {

  transform: rotate(5deg) scale(1.5);

}

a:hover #img3, a:focus #img3 {

  transform: rotate(-7deg) scale(1.5);

}

a:hover #img4, a:focus #img4 {

  transform: rotate(2deg) scale(1.5);

}

a:hover img {   

  box-shadow: 6px 6px 6px rgba(0,0,0,.3); 

}

</style>

Step 4.B

Save your file and check it out in a browser.  The images should tilt and the drop shadow is larger when you mouse over them.  But the pictures sort of pop out in a jarring motion.  That can be fixed with a transition.

Step 5.A

Add the transition shorthand property to the normal img state (i.e., not on :hover or :focus).  The property we want to transition in this case is transform.  Set the duration to 0.3 seconds and use the linear timing function.  img { transition: transform 0.3s linear; }

img {

  width: 200px;

  height: 150px;

  box-shadow: 2px 2px 2px rgba(0,0,0,.4);

  transition: transform 0.3s linear;

}

a:hover #img1, a:focus #img1 {

  transform: rotate(-3deg) scale(1.5);

} 

a:hover #img2, a:focus #img2 {

  transform: rotate(5deg) scale(1.5);

} 

a:hover #img3, a:focus #img3 {

  transform: rotate(-7deg) scale(1.5);

} 

a:hover #img4, a:focus #img4 {

  transform: rotate(2deg) scale(1.5);

}

a:hover img {   

  box-shadow: 6px 6px 6px rgba(0,0,0,.3); 

}

</style>

Step 5.B

Save your file and check it out in a browser.  Now the images enlarge gradually.  You can try playing around with different durations and timing functions, or try altering the transforms, or their origin points, to see what other effects you can come up with.

The End