Input Field Placeholder to Label Transition

This is good example of material designed input field placeholder to level transition. Here, when you click on input field or focus on text area visible placeholder will animate from placeholder to label. This animation of placeholder to label in achieved with the help of advance css Properties like transition and transform.

Transition help to change the position from placeholder to label at the top of input field and transform help to reduce the size of text. But in the case of this material design html form I have animated most of the things by use of css3 property. Here Transition is used to handle all effects weather it is border animation, background color animation, font size transition or position.