COMP 126 (Chapter 16)

Which of the following can you use in an @keyframes selector to indicate property values for specific positions in an animation? a. a percentage from 1 to 100 b. a number from 1 to 100 c. a percentage from 0 to 100 d. a number from 0 to 100

a percentage from 0 to 100

To slowly rotate an image when the user hovers the mouse pointer over it, you can use a. a transform b. an animation c. a transition d. a transform and a transition

a transform and a transition

To gradually change one or more properties of an element, you can write a. an animation b. a transition c. a filter d. a transform

a transition

Which of the following can you NOT do with a filter? a. adjust the brightness of an image b. add a drop shadow to an image c. convert the colors of an image d. convert an image to black and white

convert and image to black and white

What will happen if the CSS that follows is applied to an h1 element? h1 { animation: animateheading 2s ease-in-out 2; } @keyframes animateheading { from { font-size: 120%; } to { font-size: 200%; } } a. The font size of the heading will increase to 200% over 2 seconds and then decrease back to 120% over 2 seconds b. The font size of the heading will increase to 200% over 2 seconds, decrease back to 120% over 2 seconds, then repeat c. The font size of the heading will increase to 200% over 2 seconds, change back to 120%, and then repeat d. The font size of the heading will increase to 200% over 2 seconds, change back to 120% over 2 seconds, and then repeat

The font size of the heading will increase to 200% over 2 seconds, change back to 120%, and then repeat

What will happen if the CSS that follows is applied to an image with an ID of #image1? #image1 { transition: 2s; } #image1:hover { transform: rotateX(360deg); } a. The image will rotate horizontally around its center and end up where it began b. The image will rotate horizontally from its bottom edge and end up where it began c. The image will rotate vertically around its center and end up were it began d. The image will rotate vertically from its bottom edge and end up where it began

The image will rotate horizontally around its center and end up where it began

This CSS h1 { animation: move 3s ease-in-out 2s; } @keyframes move { from { margin-left: 20%; color: blue; } to { margin-left: 60%; color: red; } } causes a heading to be a. moved to the right over 2 seconds after a delay of 3 seconds b. moved to the right over 3 seconds after a delay of 2 seconds c. moved to the left over 2 seconds after a delay of 3 seconds d. moved to the left over 3 seconds after a delay of 2 seconds

moved to the right over 3 seconds after a delay of 2 seconds

Which of the following methods would you use to transform an element so it appears wider than its original size? a. scaleX b. translateX c. scaleY d. translateY

scaleX

Which of the following can you NOT specify, within a CSS transition rule? a. the duration/length of the transition b. the delay before the transition starts c. the condition that will cause the transition to occur d. the properties that will be changed by the transition

the condition that will cause the transition to occur

Which of the following methods would you use to transform an element so it appears lower than its original position? a. scaleX b. translateX c. scaleY d. translateY

translateY