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