Transitions and Transforms

Question 1

The keyword value _____ can be used to transition every animatable property in a CSS rule.

Answer 1

transition-property: all; (default)

Question 2

What transition property defines how long a transition animation should take to complete?

Answer 2

transition-duration

Question 3

Y/N: Is every CSS property an animatable property?

Answer 3

No

Question 4

Y/N: Is it possible to define multiple transitions in one declaration?

Answer 4

Yes

Question 5

What is used to specify the names of CSS properties that will be animated?

Answer 5

transition-property

Question 6

How many values does the cubic-bezier function accept?

Answer 6

4

Question 7

The default value for transition-timing-function is _____.

Answer 7

ease

Question 8

What property can we use to increase or slow down the transition speed in its duration?

Answer 8

transition-timing-function

Question 9

What is the correct order of point values for cubic-bezier?

Answer 9

cubic-bezier(P1x, P1y, P2x, P2y)

Question 10

In the transition shorthand property, the second time value is considered the _____ value.

Answer 10

delay

Question 11

Transition shorthand

Answer 11

property, duration, timing function, delay

Question 12

Create a transition for the border-radius property of a div. Give the transition a duration of 2 seconds, a delay of 1 second, and a timing function that maintains a linear motion.

Answer 12

-webkit-transition: border-radius 2s linear 1s;

Question 13

The default value of the transform-origin property is _____.

Answer 13

50% 50%

Question 14

What are some of the angle units the rotate function accepts?

Answer 14

deg, grad, rad, turn

Question 15

What transform function accepts one of various types of angle units as an argument?

Answer 15

rotate()

Question 16

What is one of the possible benefits of using the translate function over positioning offsets?

Answer 16

it performs better because it’s hardware accelerated, which results in smoother animations

Question 17

What will position the transform-origin at the bottom-right corner of an element?

Answer 17

transform-origin: 100% 100%

Question 18

What is equivalent to translateZ(400px)?

Answer 18

transform: scaleZ(2) translateZ(200px);

Question 19

In the scaleZ function, the number argument we define…

Answer 19

is multiplied by the element’s current position on the Z axis

Question 20

When defining a rotate3d() function, what do the 4 values represent?

Answer 20

the first 3 values in the argument set the direction of the rotation and the fourth value sets the rotation angle

Question 21

Before transforming an element in 3D, we need to use what property to establish a 3D space?

Answer 21

perspective

Question 22

When a perspective is defined, the perspective value will be applied to what elements?

Answer 22

direct child elements only

Question 23

What declaration will pass down the 3D perspective to nested elements?

Answer 23

transform-style: preserve-3d;

Question 24

To tell the browser to hide the backside of a 3D element, we’ll need to use the _____ property and the value _____.

Answer 24

backface-visibility, hidden

Question 25

What perspective values will display the deepest perspective?

Answer 25

values less than 800-1000