How to create CSS Animation?

Create CSS Animation

/*-------zoom out and in Animation----*/  

@keyframes animation-5 {

0% {

  transform: scale(1);

}

100% {

  transform: scale(1.1);

}

}

  

.aniamtion-key-5 {

    position: relative;

    animation-name: animation-5;

    animation-duration: 1.5s;

    animation-iteration-count: infinite;

    animation-direction: alternate;

    transition: all 0.4s ease-in-out;

}

/*-------Left to right Animation----*/ 

  @keyframes animation-2 {

    0% {

      transform: translateX(0);

    }

    100% {

      transform: translateX(50px);

    }

  }

.aniamtion-key-2 {

    position: relative;

    animation-name: animation-2;

    animation-duration: 2.5s;

    animation-iteration-count: infinite;

    animation-direction: alternate;

}

/*-------Top to bottom Animation----*/ 

@keyframes animation-1 {

0% {

  transform: translateY(0);

}

100% {

  transform: translateY(30px);

}

}

.aniamtion-key-1 {

    position: relative;

    animation-name: animation-1;

    animation-duration: 3s;

    animation-iteration-count: infinite;

    animation-direction: alternate;

}

/*-------Rotating Animation----*/  

@keyframes animation-7 {

0% {

  transform: rotate(0);

}

100% {

  transform: rotate(-1000deg);

}

}

  

.keyframe5 {

    position: relative;

    animation-name: animation-7;

    animation-duration: 90s;

    animation-iteration-count: infinite;

    animation-direction: alternate;

    animation-timing-function: cubic-bezier(0.59, 0.59, 1, 1);

}