Animation* is the process of making the illusion of motion and change by means of the rapid display of a sequence of static images that minimally differ from each other. The illusion—as in motion pictures in general—is thought to rely on the phi phenomenon.
(from Wikipedia)
A frame is one of the many still images which compose the complete moving picture / animation
Frame rate, also known as frame frequency, is the frequency (rate) at which an imaging device displays consecutive images called frames. [...] Frame rate is expressed in frames per second (FPS). — Wikipedia
Borrow from Flash's term: tween - inbetweening animation
Computer-generated animation by changing styles and display properties gradually over a period of time
There are at least 2 keyframes marks the start and end states of the animation
Authoring simple tween animation with Google Web Designer
Example:
p {
animation-delay: 0s;
animation-direction: alternate;
animation-duration: 3s;
animation-iteration-count: 3;
animation-name: slidein;
animation-timing-function: ease;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}Example:
.target {
transition-delay: 0s;
transition-duration: 3s;
transition-property: all;
transition-timing-function: ease;
}Most common: all, left, right, top, bottom, width, height, opacity, transform, color, border, ...
http://matthewlein.com/ceaser/
Limitation: elastic, spring
Life-like movement, no fixed timing or duration.
Example: Facebook Rebound
Example: A real physics engine
Q&A