what's the usage of percentage ?

Answer 1

% helps to create an responsive website,In simple words if you gives width,margin,padding and much more thing's values in percentage then width,margin,paddings are automatically adjusted according to the device.
for example you set a div tag's width 70 percent then then it take 70%place of user's device's screen.(sorry for any mistake in English language).for better understanding simply search on YouTube "create responsive website" there is lot of stuff which can help you.

Answer 2

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 3

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 %