CIW Lesson 4 (mastery course ?'s)

How can you define the position of an animation using the @keyframes rule?

By specifying a percentage from 0% to 100%, or by using the keywords "to" and "from"

Which animation property should you use to specify how long an animation will take to complete one cycle?

The animation-duration property

The animation-timing-function property of the @keyframes rule specifies:

how an animation progresses over one cycle.

What CSS3 2D transform method combines all of the 2D transform methods into one, which enables an element to rotate, scale, move (translate) and skew?

Matrix(n,n,n,n,n,n)

When you use the CSS3 transition property, you must specify the duration of the effect. If you do not specify the duration, which of the following will result?

No transition will occur.

Which CSS3 technique can you use to place an HTML element on top of another HTML element?

Overlay

What CSS3 2D and 3D transform method would you use to increase or decrease the size of an element?

Scale

What is required to create CSS3 animations?

The @keyframes rule

What is needed to provide coordinates in three-dimensional space to create a plane to help orient a 3D object?

The Z-axis

Which animation property should you use to specify the number of times that an animation will play?

The animation-iteration-count property

Which animation property should you use to specify whether an animation is running or paused?

The animation-play-state property

What happens when you assign a negative z-index value to an element?

The element will display behind other elements.

When you use the CSS3 opacity property, how do you specify the level of transparency to apply?

You specify a value between 0.0 and 1.0.

What CSS3 property should you use if you want to allow the user to control the dimensions of an element (such as the <div> element)?

The resize property

Which set of CSS3 properties can you use to alter the appearance or operation of a Web page?

The user interface properties

Which statement is true regarding CSS3 animations?

They were designed to replace basic animations that previously required third-party, proprietary plug-ins or the use of JavaScript.

Why would you use the CSS3 transform properties in a Web document?

To change the shape, size and/or position of an element

Why would you use the CSS3 opacity property when you overlap images or other elements in your Web page?

To make the foreground element partially transparent so elements in the background will be visible

What is the term for a CSS3 effect that allows elements to rotate, move, flip and stretch?

Transform

What is the term for a CSS3 effect that changes an element from one style to another style based on a user-triggered event?

Transition

What 2D and 3D transform method would you use to move an element from its current position?

Translate

When you want to create an overlay, how can you specify the stack order of an element?

Use the Z-index property.

Consider the following snippet of code: section { background-image: url(globe.png); background-repeat: no-repeat; background-size: contain; resize: both; overflow: auto; } What can you determine from this code?

You can resize both the height and width of the section element, including the globe background image.

The animation-direction property of the @keyframes rule specifies:

whether to play the animation in reverse on alternate cycles.