CSS Animation

Question 1

Create an animation with what special keyword

Answer 1

@keyframes animation-name { … }

Question 2

Link to an animation called ‘slider’ from a style.

Answer 2

animation-name: slider;

Question 3

Make the animation repeat indefinitely

Answer 3

animation-iteration-count: infinite;

Question 4

Have the animation use easing.

Answer 4

animation-timing-function: ease-in; // ease-in-out etc.

Question 5

Animation should start next iteration from end position (or start position)

Answer 5

animation-fill-mode: forwards; // backwards

Question 6

Animation should reverse its motion for the next iteration (or keep it’s motion the same)

Answer 6

animation-direction: alternate; // normal or reverse

Question 7

If animating the hand of a stopwatch, what animation property would you use and how?

Answer 7

animation-timing-function: steps(12, end);

Use the special steps() function.