Adding Animation Keys
There are two methods in which you can add Keys to an animation track. The first is by using the Auto Key checkbox located inside the Timeline window (yellow arrow below). This will automatically add Keys to the Timeline when you make adjustments to a value that supports Keyframing.
The currently selected animation track is highlighted at the top of the Timeline (indicated by the yellow box above).
The general workflow for adding Keys via the Auto Key option is to specify a time in which you want to reach your desired value for your Widget, then moving the Timeline Bar to that time and setting the value via the Details panel or by using the Grid (mostly used for location, rotation, or scale). Once you have set your end result, scrub to the beginning of your sequence and set the default state for your Widget. When scrubbing the Timeline bar between the two time periods, you should see your change occur gradually over the time period.
The second method in which you can add Keys is by clicking the Add Key button next to a setting that supports Keyframing.
In the image above, the icon next to each of the settings can be clicked on and doing so will result in a Key for the value being added to the Timeline at its current position. In the image below, Keyframes for Background Color have been added at 0.00 and 2.00 where the Background Color of a Button Widget is changed from White to Yellow over 2 seconds.