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.