Animations

Question 1

To create an animation sequence containing keyframes that indicate the start and end states of an animation, we’ll need to use what?

Answer 1

@keyframes

Question 2

Y/N: Is the animation name optional in a keyframe rule?

Answer 2

No

Question 3

Y/N: Are we able to use transform functions in keyframe rules?

Answer 3

Yes

Question 4

What is one of the benefits of using percentages for keyframe selectors instead of the keywords “from” and “to”?

Answer 4

• we can define the intermediate steps of the animation sequence, so we have more control over how the animation progresses

Question 5

Using the keyframe keyword “from” is the same as using _____.

Answer 5

0%

Question 6

Using the keyframe keyword “to” is the same as using:

Answer 6

100%

Question 7

Using the prefix for WebKit-based browsers, create a property that will bind the keyframe sequence “slide” to the .prog-bar selector.

Answer 7

.prog-bar {
-webkit-animation-name: slide;
}

Question 8

Using the prefix for WebKit-based browsers, add a new property that will give an animation a duration of 2 seconds.

Answer 8

-webkit-animation-duration: 2s;

Question 9

Using the prefix for WebKit-based browsers, add a timing function property that will give an animation a linear motion.

Answer 9

-webkit-animation-timing-function: linear;

Question 10

Using the prefix for WebKit-based browsers, bind the rock-boat animation to the .boat selector. Give it a 3 second duration and set it to repeat infinitely.

Answer 10

.boat {
  -webkit-animation-name: rock-boat;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
}

Question 11

Using the prefix for WebKit-based browsers, bind the steam animation to the .steam selector. Give it a 4 second duration, a 2 second delay, and set it to repeat infinitely.

Answer 11

.steam {
  -webkit-animation-name: steam;
  -webkit-animation-duration: 4s;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
}

Question 12

Using the prefix for WebKit-based browsers, bind the bg-move animation to the body selector. Give it an 8 second duration, then set it so that the final keyframe continues to apply after the animation sequence has completed.

Answer 12

body {
-webkit-animation: bg-move 8s;
-webkit-animation-fill-mode: forwards;
}

Question 13

Using the prefix for WebKit-based browsers, bind the mike-float animation to the .mike selector. Give it a 3 second duration and set it to repeat infinitely.

Answer 13

.mike {
-webkit-animation: mike-float 3s infinite;
}

Question 14

Animation shorthand

Answer 14

name, duration, timing-function, delay, iteration-count, fill-mode