CSS Animation Notes

CSS Animation rules and principles.

Shothands

1. Transition - It follows the following syntax:

   transition: property duration timing-function delay;
   /* e.g. */
   transition: background-color 2s ease-in-out .2s;

   You can add multiple transitions separated by commas here. Or you can use all to perform all transition as:

   transition: all 0.2s ease-in-out .2s;

2. Animation - Animation has the following syntax:

   animation: name duration timing-function delay iteration-count direction fill-mode play-state;
   /* e.g. */
   .ani {
      animation: colors 5s linear infinite alternate;
   }

Animation Shorthand initial values

1. animation-name: none
2. animation-duration: 0s
3. animation-timing-function: ease
4. animation-delay: 0s
5. animation-iteration-count: 1
6. animation-direction: normal
7. animation-fill-mode: none
8. animation-play-state: running

Animation Properties - Animation, Transform and Transition

Property	Description
animation	A shorthand property that combines animation properties
animation-name	Specifies a name for the animation sequence
animation-duration	The amount of time the animation lasts
animation-timing-function	Describes the acceleration of the animation
animation-iteration-count	The number of times the animation repeats
animation-direction	Whether the animation plays forward, in reverse, or alternates back and forth
animation-play-state	Whether the animation is running or paused
animation-delay	The amount of time before the animation starts running
animation-fill-mode	Overrides limits to when animation properties can be applied
backface-visibility	Determines whether the reverse side of an element may be visible in 3-D transforms
perspective	Establishes an element as a 3-D space and specifies the perceived depth
perspective-origin	Specifies the position of your viewpoint in a 3-D space
transform	Specifies that the rendering of an element should be altered using one of the 2-D or 3-D transform functions
transform-origin	The point around which an element is transformed
transform-style	Used to preserve a 3-D context when transformed elements are nested
transition	A shorthand property that combines transition properties
transition-property	Defines which CSS property will be transitioned
transition-duration	The amount of time the transition animation lasts
transition-timing-function	Describes the manner in which the transition happens (changes in acceleration rates)
transition-delay	The amount of time before the transition starts

CSS Animation Tutorial: css-animation.io