HTML5 Transition Tutorial

Q1.

Create a basic transition.

A.	Use the transition-delay, transition-property, or transition-duration properties, or the transition shorthand property.
B.	Define a counter-transition in the base style for an element.
C.	Use the transition-timing-function property.
D.	Use the animation-delay, animation-duration, animation-iteration-count, and animation-name properties. The animation-name value must correspond to a set of key frames defined using @keyframes.

Q2.

Create an inverse transition.

A.	Use the transition-delay, transition-property, or transition-duration properties, or the transition shorthand property.
B.	Define a counter-transition in the base style for an element.
C.	Use the transition-timing-function property.
D.	Use the animation-delay, animation-duration, animation-iteration-count, and animation-name properties. The animation-name value must correspond to a set of key frames defined using @keyframes.

Q3.

Specify how intermediate property values are calculated during a transition.

A.	Use the transition-delay, transition-property, or transition-duration properties, or the transition shorthand property.
B.	Define a counter-transition in the base style for an element.
C.	Use the transition-timing-function property.
D.	Use the animation-delay, animation-duration, animation-iteration-count, and animation-name properties. The animation-name value must correspond to a set of key frames defined using @keyframes.

Q4.

Create a basic animation.

A.	Use the transition-delay, transition-property, or transition-duration properties, or the transition shorthand property.
B.	Define a counter-transition in the base style for an element.
C.	Use the transition-timing-function property.
D.	Use the animation-delay, animation-duration, animation-iteration-count, and animation-name properties. The animation-name value must correspond to a set of key frames defined using @keyframes.

Q5.

Set an initial state for an animation.

A.	Add a from clause to the @keyframes declaration.
B.	Add clauses to the @keyframes declaration, using the name of the clause to specify the percentage point of the animation to which the key frame pertains.
C.	Use the animation-direction property.
D.	Animations revert to the initial state at completion; consider using a transform instead.

Q6.

Specify intermediate key frames for an animation.

A.	Add a from clause to the @keyframes declaration.
B.	Add clauses to the @keyframes declaration, using the name of the clause to specify the percentage point of the animation to which the key frame pertains.
C.	Use the animation-direction property.
D.	Animations revert to the initial state at completion; consider using a transform instead.

Q7.

Specify the direction of alternate repeats of the animation.

A.	Add a from clause to the @keyframes declaration.
B.	Add clauses to the @keyframes declaration, using the name of the clause to specify the percentage point of the animation to which the key frame pertains.
C.	Use the animation-direction property.
D.	Animations revert to the initial state at completion; consider using a transform instead.

Q8.

Preserve the final state of an animation.

A.	Add a from clause to the @keyframes declaration.
B.	Add clauses to the @keyframes declaration, using the name of the clause to specify the percentage point of the animation to which the key frame pertains.
C.	Use the animation-direction property.
D.	Animations revert to the initial state at completion; consider using a transform instead.

Q9.

Apply animations in the initial page layout.

A.	Include the animation properties in styles that apply to elements in their base state.
B.	Create multiple styles that contain the animation-name property and whose values refer to the same @keyframes declaration.
C.	Specify multiple @keyframes declarations as the value of the animation-name property.
D.	Use the animation-play-state property.

Q10.

Reuse key frames.

A.	Include the animation properties in styles that apply to elements in their base state.
B.	Create multiple styles that contain the animation-name property and whose values refer to the same @keyframes declaration.
C.	Specify multiple @keyframes declarations as the value of the animation-name property.
D.	Use the animation-play-state property.

Q11.

Apply multiple animations to an element.

A.	Include the animation properties in styles that apply to elements in their base state.
B.	Create multiple styles that contain the animation-name property and whose values refer to the same @keyframes declaration.
C.	Specify multiple @keyframes declarations as the value of the animation-name property.
D.	Use the animation-play-state property.

Q12.

Pause and resume an animation.

A.	Include the animation properties in styles that apply to elements in their base state.
B.	Create multiple styles that contain the animation-name property and whose values refer to the same @keyframes declaration.
C.	Specify multiple @keyframes declarations as the value of the animation-name property.
D.	Use the animation-play-state property.

Q13.

Apply a transform to an element.

A.	Use the transform property.
B.	Use the transform-origin property.
C.	Include the transform property in the transitioned style or in a @keyframes declaration.
D.	Add clauses to the @keyframes declaration, using the name of the clause to specify the percentage point of the animation to which the key frame pertains.

Q14.

Specify an origin for a transform.

A.	Use the transform property.
B.	Use the transform-origin property.
C.	Include the transform property in the transitioned style or in a @keyframes declaration.
D.	Use the transition-timing-function property.

Q15.

Animate or transition a transform.

A.	Use the transform property.
B.	Use the transform-origin property.
C.	Include the transform property in the transitioned style or in a @keyframes declaration.
D.	Use the transition-delay, transition-property, or transition-duration properties, or the transition shorthand property.

HTML5 Tutorials