CSS Animation

Question 1

What is transition?

Answer 1

transition-property: color;

transition-duration: 1s;

transition-timing-function: linear; (ease, ease-in)

transition-delay: 0.5s;

Not ALL properties have a transition state. It needs to have an “in-between” state to work

Question 2

What are keyframe animations?

Answer 2

@keyframes animation-name{

1) Start with @keyframes
2) Add an animation name
3) Use a descriptive name
4) Set your breakpoints

Question 3

What are some best practices for breakpoints?

Answer 3

1) Use a percentage value
2) Add breakpoints inside of the @keyframes
3) 0% start and 100% end
4) CSS properties to be animated added to the breakpoints

Question 4

How do you actually ANIMATE?

Answer 4

You need to use animation-name with the keyframe name you created on the element with the class

Then set the animation duration in seconds or milli

You can also use:

animation-timing-function - which determines the acceleration speed

animation-delay: time delay before animation starts

animation-iteration: count of animation times