Animation w/keyframes

Basically with keyframe you create the appearence of the animation by gradually changing from one set of styles to another. You can use From-To or in percentages starting in 0% and complete 100%.

In the next example, we create a keyframe with the name of moveTop, this keyframe will change the margin-top of an element gradually.

@keyframes moveTop {
    0%   {margin-top: 0px;}
    25%  {margin-top: 200px;}
    50%  {margin-top: 50px;}
    75%  {margin-top: 100px;}
    100% {margin-top: 200px;}
}

@keyframes mymove {
    from {margin-top: 0px;}
    to {margin-top: 200px;}
}

To create the animation sequence, you have to configure the animation property and its sub-properties. We will use animation-name and animation-duration to start but there are more properties that can give more animation to the element, like repeat the animation or delay the animation.

In the next animation,

will move vertically changing its margin-top from zero to 200px, 50px, 100px and ends in 200px in 3 seconds.

p {
  animation-duration: 3s;
  animation-name: moveTop;
}


@keyframes moveTop {
    0%   {margin-top: 0px;}
    25%  {margin-top: 200px;}
    50%  {margin-top: 50px;}
    75%  {margin-top: 100px;}
    100% {margin-top: 200px;}
}

3 Steps for animation:
1. Create animation sequence with animation property and sub-properties.
2. Create animation appearance with keyframe.
3. Link the animation appearance with the animation sequence, calling the name of the keyframe in the animation-name property.

If you want to know more about this topic, you can find more information in Mozilla Developer Network-CSS Animation.