CSS Animations is a very wide topic. I'll try to cover the things I've got a grip on during the past few weeks.

CSS basically provides you two types of animations:
1) Using the transform property.
2) Using Keyframes.

Let us first explore animations through transition property.

Animations using Transform

Have a look at this CodePen:

• Transform Animation

In the above example, we mainly focus on the following properties:

(properties shown here are only related to the ones used for animation)

.card{
  background-color:#9C19E0;
  transition: all 0.5s ease-out;
}

.card:hover{
  transform:scale(1.2);
  background-color:#FF5DA2;
}

The transform properties help us to change various properties such as move the card left, right, scale it up (as shown in the above example) and the transition property helps us to time the animations and also provide a timing function (ease-out) in the above example which basically starts the animation quickly and slows it down towards the end finishing it in the time provided.

This is a very simple technique to implement animations in CSS, let us now explore the Keyframes approach:

Animations using Keyframes

Have a look at this CodePen:

• Keyframes Animation

You will notice the animation starts as soon as the page loads, and happens twice (because of the properties we've set).

Let us get into the code:

(properties shown here are only related to the ones used for animation)

.card{
  animation-name: scaleUp;
  animation-duration: 2s;
  animation-iteration-count: 2;
  animation-timing-function: ease-out;
  animation-delay: 0.75s;
}


@keyframes scaleUp{
  0%{
    opacity:0;
    transform: scale(0);
  }

  100%{
    opacity:1;
    transform: scale(1);
  }
}

here 0% defines when the animation just starts and 100% defines when the animation has been completed.

if we define something with 80%, it would mean manipulating the properties when the animation has been completed by 80%.

So you can see we have quite a lot of properties set for a Keyframes animation, we will also look at a shorter way to write all these, but for now let's understand what they do:

animation-name: Specifies the name of the keyframe you want to bind to the selector

animation-duration: Specifies how many seconds or milliseconds an animation takes to complete

animation-timing-function: Specifies the speed curve of the animation

animation-delay: Specifies a delay before the animation will start

animation-iteration-count: Specifies how many times an animation should be played

There are a few more properties associated with animations which give you more command over them.

Here's an example of how to write all these in a single line:

animation: name duration timing-function delay iteration-count

You can play around with these properties and see the various kinds of effects they produce.