element to have a slower animation, so I'll add the `animate--slow` class to it. Similarly, I can use other utility classes like `animate--infinite` or `animate--fast` for different elements, providing flexibility and reusability in our animations.
1. There are two main ways to create animations in CSS: CSS Transitions and CSS Animations.
2. CSS Transitions allow for changes in a property to take place over time without a transition, any changes in a property would take effect immediately.
3. CSS Transitions should be used when properties are changed interactively, for example, in CSS, a property can change when hovered on and when focused on.
4. CSS Animations provide keyframes for more control over the animation and allows us to create complex animations on a frame by frame basis.
5. CSS Animations should be used when you want to create complex animations that just work without having to wait for properties that change interactively.
6. Both Transitions and Animations can be combined to create stunning animations.
7. To create a transition, we need a component that has a change in property.
8. The transition property defines which property the transition effect should be applied to.
9. The transition duration defines how long the transition effect should take to complete.
10. The transition timing function defines the acceleration curve for the transition.
11. The transition delay defines the delay before the transition should take effect.
12. To create an animation, we need an element that we want to animate.
13. In CSS, we can add a keyframe to animate the element.
14. The animation name property is for selecting the keyframe you want to use to animate the element.
15. The animation duration property sets the time it takes for the animation to complete one lap.
16. The animation timing function property defines the acceleration curve for the animation.
17. The animation delay property sets a delay before running the animation.
18. The animation iteration count property defines how many times you want the animation to run.
19. The animation Direction property defines whether the animation will run normally or in reverse.
20. The animation fill mode property determines how the animation will apply the styles from our keyframe before and after its execution.
21. Writing these seven properties each time you want an element animated is way too much work, so you can use the animation shorthand property.
22. The animation is placed on the element itself, which is bad for reusability.
23. Instead of selecting The Heading element by its class name and giving it the animation, you can create a utility class specifically for the slide and left animation and give it the animation property with all of the same values.
24. The way it works is over in the HTML, every element you want animated, you give the animate class, then you can select the animation you want in the classes of each element.
25. This architecture works by only allowing the utility classes to work if the animate class exists in the same element.
26. With this way of working with animations, you can essentially create your very own mini animation library.
27. The reason this works so well is because we decoupled the relationship between the animation and the element, making each animations a reusable utility class.
28. The last animation created, the bounce, can be achieved entirely with the transform of Translate Y.
29. The bounce starts on the ground so it's set to zero. The end of the animation needs to also be on the ground so it's set to zero.
30. The in-between animations are created by replacing the percentages where you're repeating the Translate Y of zero with comma separated percentages.
31. Keyframe percentages don't have to be in order.
32. The reason this works is because keyframe percentages don't have to be in order.
33. The bounce animation can be cleaned up by removing all of the percentages where you're repeating the Translate Y of zero.
34. Then on your zero percent, you can comma separate all of the percentages that had the Translate Y of zero so zero percent, twenty percent, fifty percent, eighty percent, and one hundred percent.
35. This is pretty much everything you need to know to start getting creative and building some beautiful animations yourself.