To create an animation in CSS, you need to be familiar with the keyframes rule. keyframes allows you to establish multiple change points in the style set of an element.
Below is a basic example of how @keyframes are used to create animation:
```
@keyframes example {
0% {background-color: red; left:0px; top:0px;}
25% {background-color: yellow; left:200px; top:0px;}
50% {background-color: blue; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
```
In this example, we have created an animation named “example”, and specified that it should take 4 seconds to complete. The element we’re applying this animation to is a `div`. It will follow the keyframes specified in the “example” animation. At start (0%), the background-color will be red and the position will be at left:0px top:0px. At 25% through the animation, the background-color will become yellow, and the position will change to left:200px top:0px. It continues in this manner, changing color and position at each step.
We used animation-name property to specify the name of the keyframe, and animation-duration property to specify how long time to complete one cycle of the animation. Other properties can be added to control other aspects of the animation, like animation-delay (to specify a delay before the animation starts), animation-iteration-count (specifies how many times an animation should be run), animation-direction (specifies whether the animation should go forwards, backwards or alternate), etc.
The values for all animation properties can be declared in shorthand using the animation property (in the order: name, duration, timing-function, delay, iteration-count, direction, fill-mode, and play-state).
