@keyframes, where each
@keyframes handles different states of your element in time. Transitions also describe the state of element between start and end. Transitions are mostly triggered by CSS changes, such as a mouse over (hover) of an element.
To make things clear, it is important to keep in mind the button that is about to be pressed. The button will have two states: ...