The Animation System:
The Animation System is seperated into 2 parts: the Animation window (accessed via “Window/Animation/Animation”), and the Animator window (accessed via “Window/Animation/Animator”).
The Animation Window:
The Animation window is what is shown above, and is where you can create, modify, and delete animation keyframes (data points which hold data on certain parameters of an object at a certain time in the animation).
Animations can be created by first clicking the red Record button, then modifying any property on the object holding the Animator component, or it’s children. This will create new keyframes in the Animation window to record the changes over time. Where these keyframes are places determines how long the animation clip is. This one is 4/6ths of a second, or 40 frames.
You can change how time is displayed by clicking the 3-dot button in the top right (the lower one). You can also set how many frames are in each second here using “Show/Set Sample Rate”.
You can delete or move entire properties or individual recorded keyframes.
Selecting different diamonds selects different keyframes.
The Animator Window:
The Animator window is where you can create, modify, and delete the transitions between different animations on a single object. It comes with 3 “nodes” by default: The Entry node, the Exit node, and the Any State node. Any animations created for this Animator Controller will appear here too. The default starting animation is made orange, and is connected to Entry.
Transitions between animation clips can be made like this:
By selecting the transition arrow, the transition properties are shown in the Inspector, where you can edit how and when the transition happens.