CSS Transitions

In notebook:
FrontEndMasters Motion Design with CSS
Created at:
2016-10-17
Updated:
2016-10-17
Tags:
css animation Fundamentals
Started her career as illustrator. 

A transition describes how a property should display change when given a different value

  transition: color 2s;
You always need at least two values (property and time).
Demo
Codepen repo for all the demos: http://codepen.io/rachelnabors-teaching/

Uses ​transform​ and ​translateX​ for the transition:
  /* ================================ A sample transition */
 .paw {
   transition: transform .25s ease-in;
}
 .playing .paw {
   transform: translateX(30px);
}
Then a JS ​onload​ adds a CSS ​playing​ class. Anatomy 

​transition-property​ the property you want to transition. List of transitionable properties: goo.gl/Ttk1S2. e.g.: linear gradients can be animated, but not radial gradients. 

​transition-duration​ in seconds or milliseconds. milliseconds are most robust for production. ​4000ms​

​transition-timing-function​ "cushioning" for the transition. optional, defaults to ​ease​. 

​transition-delay​ the number of millisecond to delay the transition before firing it. optional

transiton: color 2s 100ms;

  in the above example it's the ​2s​ the optional 2 seconds delay.