Transitions and Transforms Flashcards
The keyword value _____ can be used to transition every animatable property in a CSS rule.
transition-property: all; (default)
What transition property defines how long a transition animation should take to complete?
transition-duration
Y/N: Is every CSS property an animatable property?
No
Y/N: Is it possible to define multiple transitions in one declaration?
Yes
What is used to specify the names of CSS properties that will be animated?
transition-property
How many values does the cubic-bezier function accept?
4
The default value for transition-timing-function is _____.
ease
What property can we use to increase or slow down the transition speed in its duration?
transition-timing-function
What is the correct order of point values for cubic-bezier?
cubic-bezier(P1x, P1y, P2x, P2y)
In the transition shorthand property, the second time value is considered the _____ value.
delay
Transition shorthand
property, duration, timing function, delay
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.
-webkit-transition: border-radius 2s linear 1s;
The default value of the transform-origin property is _____.
50% 50%
What are some of the angle units the rotate function accepts?
deg, grad, rad, turn
What transform function accepts one of various types of angle units as an argument?
rotate()
What is one of the possible benefits of using the translate function over positioning offsets?
it performs better because it’s hardware accelerated, which results in smoother animations
What will position the transform-origin at the bottom-right corner of an element?
transform-origin: 100% 100%
What is equivalent to translateZ(400px)?
transform: scaleZ(2) translateZ(200px);
In the scaleZ function, the number argument we define…
is multiplied by the element’s current position on the Z axis
When defining a rotate3d() function, what do the 4 values represent?
the first 3 values in the argument set the direction of the rotation and the fourth value sets the rotation angle
Before transforming an element in 3D, we need to use what property to establish a 3D space?
perspective
When a perspective is defined, the perspective value will be applied to what elements?
direct child elements only
What declaration will pass down the 3D perspective to nested elements?
transform-style: preserve-3d;
To tell the browser to hide the backside of a 3D element, we’ll need to use the _____ property and the value _____.
backface-visibility, hidden
