Added documentation about CSS animations

Author: Tsvetan Raikov

ui/animation.md

@@ -194,7 +194,7 @@ The following list presents all animation properties:
 - **animation-name**: specifies the name of the @keyframes rule that should be used.
 - **animation-delay**: specifies the time between the style is applied and the beginning of the animation.
 - **animation-duration**: the length of the animation in seconds.
-- **animation-iteration-count**: Specifies how many times the animation should be played. Default is 1. To repeat an animation forewer use infinite.
+- **animation-iteration-count**: Specifies how many times the animation should be played. Default is 1. To repeat an animation forever use infinite.
 - **animation-timing-function**: Defines how the animation transitions through keyframes, by establishing acceleration curves.
 - **animation-fill-mode**: Configures what values are applied by the animation after it is executing.
 - **animation-direction**: Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.
@@ -211,7 +211,7 @@ To set multiple points at which an element should undergo a transition, use the
 }
 ```
 
-This example defines an animation with two keyframes. "from" represents 0% (the start of the animation) and "to" represents 100% (the final value). You can add more keyframes by using percents.
+This example defines an animation with two keyframes. "from" represents 0% (the start of the animation) and "to" represents 100% (the final value). You can add more keyframes by using percent.
 
 The following example will change the background-color when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:
 
@@ -297,7 +297,7 @@ The **animation-timing-function** property specifies the speed curve of the anim
 }
 ```
 
-## Determine the result whent the animation ends
+## Determine the result when the animation ends
 
 The **animation-fill-mode** property determines the element style when the animation finishes. Its default value is "none". In this case all animated values will be reset to a previous value when the animation finishes. When using "forwards" all animated values will apply the property values for the time the animation ended.