ITSE 1311 Beginning Web Programming Worksheet

A13 – Use a CSS3 transition and transform
In this exercise, you’ll use a transition and a transform to rotate elements when the mouse hovers
over them as shown below. Estimated time: 10 to 15 minutes.
1. Open these HTML and CSS files, and run the HTML file:
sampson.html
speaker.css
2. Add CSS for a transform that will rotate the list items in the sidebar horizontally 360
degrees when the mouse hovers over them.
3. Add CSS for a transition that will cause the transform to last for 3 seconds.
A14 – Use CSS3 animation
In this exercise, you’ll animate the image in the page header so it appears to bounce from left to
right. Estimated time: 10 to 15 minutes.
1. Open these HTML and CSS files, and run the HTML file:
sampson.html
speaker.css
2. Add CSS to the image in the header that will use an animation named “bounce” with
a duration of half a second that will repeat eight times, use the ease-in timing
function, and alternate direction.
3. Add an @keyframes selector rule that defines the keyframes for the animation. In the
from group, set the left and right padding so the animation starts at the image’s
current position on the page. In the to group, set the left and right padding so the
image moves to the right 20 pixels.