Sololearn CSS course Transitions & Transforms answers

Here are all the questions and answers that I hope will help you learn CSS course.

Other course answers

Sololearn CSS course The Basics answers
Sololearn CSS course Working with Text answers
Sololearn CSS course Properties answers
Sololearn CSS course Positioning and Layout answers
Sololearn CSS course CSS3 Basics answers
Sololearn CSS course Gradients & Backgrounds answers
Sololearn CSS course CSS Filters answers

64.1 Lesson

Transitions

Question:

CSS3 Transitions
Which of the following is not a supported parameter of the transition property?

Answer:

type

Question:

The Transition Property
Add a transition property that changes the background color in 5 seconds.

Answer:

transition: background-color 5s ease-in;

Question:

transition-timing-function
Which of the following timing functions defines custom transitions?

Answer:

cubic-bezier()

CSS 65.1 Lesson

transform: rotate()

Question:

CSS3 Transforms
What value does the rotate function take?

Answer:

angle

Question:

Using Negative Values
Add the transformation property to rotate the element 45 degrees, counter-clockwise.

Answer:

transform: rotate(-45deg);

66.1 Lesson

transform origin, translate(), skew()

Question:

transform-origin
Which choice is the default value for the transform-origin property?

Answer:

center

Question:

The translate() Method
Add a translate function that moves the element 50 pixels from the left and 100 pixels from the top.

Answer:

transform: translate (50px, 100px);

Question:

The skew() Method
Which value type is used in the skew function?

Answer:

degrees

67.1 Lesson

scale(), Multiple Transformations

Question:

The scale() Method
Fill in the blank to reduce the element to 20% of its original size.

Answer:

transform: scale(0.2);

Question:

Multiple Transforms
When adding multiple transformations in a single transform property, separate them with ...

Answer:

spaces

68.1 Lesson

Keyframes & Animation

Question:

CSS3 Animations
Can you have multiple key frames in an animation property?

Answer:

Yes

Question:

The @keyframes Rule
Which alternative word can be used in place of 0%?

Answer:

from

Question:

The @keyframes Rule
Fill in the blank to define an animation named "anim" containing keyframes.

Answer:

@keyframes anim

69.1 Lesson

Animation Properties

Question:

The animation-name Property
Fill in the blanks to make the animation complete in 5 seconds:

Answer:

-webkit-animation-duration:5s;

Question:

Animation Properties
Fill in the blank to specify a 2-second delay before the animation begins.

Answer:

animation-delay:2s;

Question:

More Animation Properties
Which property value is used to have the animation repeat forever?

Answer:

infinite

Question:

animation Property
Add an animation named sizechange, which starts after 2 seconds, runs for 5 seconds, uses the ease function, and loops forever.

Answer:

<style>
  .test {
    animation-name: sizechange;
    animation-duration: 5s;
    animation-timing-function: ease;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }
</style>

70.1 Lesson

3D Transforms

Question:

3D Transforms
Add a rotate function that rotates the element 45 degrees around the Z axis.

Answer:

transform: rotateZ(45deg);

Question:

Translations
Fill in the missing value to "push" the elements 100 pixels back.

Answer:

transform: translateZ(-100px);

Question:

Perspective
Higher perspective value means:

Answer:

further distance

71.1 Lesson

Module 7 Quiz

Question:

Which of these is a valid CSS3 transformation statement?

Answer:

scale()

Question:

How will an element with a statement transform: translate(0, 100px) behave?

Answer:

Pushed down 100 pixels

Question:

Which transformation does not exist in CSS3?

Answer:

skewB

Question:

Fill in the blanks to rotate the object with the id "ball" 45 degrees counter-clockwise.

Answer:

<style>
  #ball {
    transform : rotate (-45deg);
  }
</style>

Question:

Fill in the blanks to make the first letter of the paragraph red and bold. Also, flip the paragraph upside down.

Answer:

<style>
  p {
    transform: rotate(180deg);
  }
  p::first-letter {
    color: red;
    font-weight: bold;
  }
</style>