Explain the concept of Tweening?

Answer:

Tweening is the process in which we create intermediate frames between two images to get the appearance of the first image which develops into the second image.
It is mainly used for creating animation. There are two types of tween's:

1. Motion Tween
2. Shape Tween

A Motion tween animates symbols moving in space, through which you can move the Symbol in any keyframe,
whereas Shape tween performs distortions on non symbol graphics.

• Tweening is not a term that's used too often in CSS.
• It has its roots in computer animation.
• Rather than telling the program exactly how to render each frame,
  the animator would tell the program what position the objects are in at two "keyframes"
  and the program would figure out how to transition the objects between those two points.
• In CSS we usually use the term "animate", but the concepts are the same.

This simple example demonstrates how to make a paragraph element slide in from off the right edge of the browser window:

p { animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}