How to add animation in css?

Answer 1

html:
<div id="id"></div>

css:
#id {
background: red;
animation: 300ms Animationname ease-in-out;
}
@keyframes Animationname {
1% {
// here goes animation at 1 % eg:
transform: scale (1);
} 100% {
// here at 100% eg:
transform:scale (2);
}
}

this example shows that the div will be scaled up by 2 so if it's size was 200px * 200px. now it's 400px * 400px

Answer 2

we can also use WebKit animations