HTML L16 Quiz

To gradually change one or more properties of an element, you can use

• an animation

• a filter

• a transition

• a transform

To change the appearance of an image after it has been loaded into the browser, you can use

• an animation

• a filter

• a transition

• a transform

To slowly rotate an image when the user hovers the mouse pointer over it, you can use

• a transform

• a transition

• an animation

• a transform and a transition

Which of the following can you NOT specify when coding a transition?

• the duration of the transition

• the delay before the transition starts

• the condition that will cause the transition to occur

• the properties that will be changed by the transition

Which of the following methods would you use to transform an element so it appears wider than its original size?

• scalex

• scaley

• translatex

• translatey

Which of the following methods would you use to transform an element so it appears lower than its original position?

• scalex

• scaley

• translatex

• translatey

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);

}

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

• The image will rotate horizontally from its bottom edge and end up where it began.

• The image will rotate vertically around its center and end up where it began.

• The image will rotate vertically from its bottom edge and end up where it began.

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%; }

}

• The font size of the heading will increase to 200% over 2 seconds and then decrease back to 120% over 2 seconds.

• The font size of the heading will increase to 200% over 2 seconds, decrease 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.

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

Which of the following can you use in an @keyframes selector to indicate property values for specific positions in an animation?

• a percent from 1 to 100

• a percent from 0 to 100

• a number from 1 to 100

• a number from 0 to 100

Which of the following can you NOT do with a filter?

• adjust the brightness of an image

• add a drop shadow to an image

• invert the colors of an image

• convert an image to black and white