Animations allow you to gradually change certain elements without using any JavaScript. This means that you can make objects bounce, slide, focus, blur, etc. To understand just how much CSS Animations can do, I suggest visiting this website, called Animista, which allows you to play around with different animations and provides you with the source code.
These are the different property values for animations:
To trigger animations, you would set an @keyframes that defines what you want to occur within the period of time specified in the element that will be animated. Within that element you also need to give the animation a name which will then be used to call the animation.
The example in the previous section has 4 boxes. For box 1, I wanted it to spin continuously. So, in my CSS file, I referred to the class .box1 and gave the animation a name (rotation), duration, timing function, and repetition count. Above this, I created an @keyframes that told it to rotate the box 260 degrees the entire duration. Each box has a different animation so I had to create separate keyframes for each animation.