what's the usage of percentage ?

Answer 1

percents in CSS are used to scale something in relation to some other factor. In responsive design you might scale your website in relation to the screen, window, or parent container size (width: 90% means 90% of wathever the screen\window\parent width is), or you might scale the font size to whatever the base font size is (a common trick in responsive design to tackle the problem of viewports: Just because a mobile screen has a certain size doesn't mean you know how the website will render since screens my have different pixel density. This way you say: 'I don't care what the pixel valid is, just make it twice as big')

In animation, since that what you tagged, you scale in relation to time. it doesnt matter if the animation lasts 2 seconds or 20, it only matters that you start here, end there, and in the middle you want this to happen. This makes it easier to adjust and reuse your animations.

Answer 2

in terms of size -keeps your div within desired scale (responsiveness). CSS media queries area is proportionally divided/queries distributed as you designed regardless the device - mobile tablet PC. there are many other things to do with %