regarding 3 and 4. The clue to them is in the names. CSS Animation works well for complex multi-step animations. Things where having to think about keyframes

regarding 3 and 4. The clue to them is in the names. CSS Animation works well for complex multi-step animations. Things where having to think about keyframes and iteration loops and stop/starts isn't an excessive burden for something that'll be used in a few key areas to create something visually interesting. CSS Transitions meanwhile, is for changes from one state to another (normal <-> hover , checked <-> unchecked). Much more common, simpler visual flourishes that are more about giving hints to the user than visual eye candy.