CSS Animations

Question 1

Which CSS rule specifies the animation code?

Answer 1

@keyframes

It will define the different states of the animation

Question 2

Which property specifies the name of the @keyframes animation?

Answer 2

animation-name

To get an animation to work, you must bind the element to an animation.

Question 3

Which property specifies a delay for the start of an animation?

Answer 3

animation-delay

Question 4

Which property specifies whether an animation should play in reverse direction or alternate cycles?

Answer 4

animation-direction

It can be:

• normal
• reverse
• alternate
• alternate-reverse
• initial
• inherit

Question 5

Which property specifies how many seconds or milliseconds an animation takes to complete one cycle?

Answer 5

animation-duration

Question 6

Which property specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)?

Answer 6

animation-fill-mode

animation-fill-mode: forwards; –> element will keep the end state
animation-fill-mode: backwards; –> element will go back to its initial state

Question 7

Which property specifies the number of times an animation should be played?

Answer 7

animation-iteration-count

Question 8

Which property specifies whether the animation is running or paused?

Answer 8

animation-play-state

Question 9

Which property specifies the speed curve of the animation?

Answer 9

animation-timing-function

Question 10

What is the syntax for the animation shorthand property?

Answer 10

div {
animation: value value value;
}

We just use the word animation. Values are separated with spaces.

The example below uses six of the animation properties:

Question 11

What are the caveats when using the animation shorthand property?

Answer 11

Because when parsing, there could be confusions between time values (animation-duration and animation-delay), or between animation-name and property keywords.
So the animation-duration value must be stated before the delay value (but not necessarily immediately after).
And for the animation-name VS keyword, a good practice would be to declare the value of animation-name first (avoiding property keywords).

Question 12

What does the animation-timing-function hold and what values can it be?

Answer 12

The animation-timing-function property specifies the speed curve of the animation.
It can have the following values:

• ease - specifies an animation with a slow start, then fast, then end slowly (this is default)
• linear - specifies an animation with the same speed from start to end
• ease-in - specifies an animation with a slow start
• ease-out - specifies an animation with a slow end
• ease-in-out - specifies an animation with a slow start and end
• cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

Question 13

How to improve performance when using animations by letting the browser know which properties and elements are just about to be manipulated?

Answer 13

By using will-change property

[will-change] allows an author to inform the UA (User Agent) ahead of time of what kinds of changes they are likely to make to an element. This allows the UA to optimize how they handle the element ahead of time, performing potentially-expensive work preparing for an animation before the animation actually begins.

Ex:

.element { will-change: transform, opacity; }