Keyframes in CSS are very diverse, you can use them for many things… just get creative!

This is going to be the truly barebones version of what you can do with keyframes, but this is just an example which you should build on, on your own.

First you can ‘include’ the animations name in the class of your choosing as such:

.randomClass {
  animation-name: exampleAnim;
  animation-duration: 5s;
}

Note: Some browsers may need you to use -webkit- before animation, like: -webkit-animation-name: sumAnim

Secondly, we will be setting up the actual keyframe part:

@keyframes exampleAnim {
  from  {color: red;}
  to  {color: blue;}
}

The best part is, you can use any CSS property inside of keyframes, so you can in theory, animate everything.

You can combine this method with the one shown above, if you really wanted to.

@keyframes exampleAnim {
  0%    {color: red;}
  25%   {color: red;}
  50%   {color: red;}
  75%   {color: red;}
  100%  {color: red;}
}

Efficiency

Sometimes it may be easier for you if you just call animations like this:

animation: repeatit 2s linear 0s infinite alternate;

This is the much easier to write, but arguably harder to read version of typing out each property one by one.

Animation Properties:

You can search up the following, if you want to expand your knowledge.

animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode

Code:

<div class="helloDiv">hello</div>

<style>
  .helloDiv {
    font-size: 18px;
    text-align: center;
    width: 50px;
    border: 1px solid black;
    border-radius: 6px;

    position: relative; // <-- important
    animation: helloDivAnim 15s infinite;
  }

  @keyframes helloDivAnim {
    0%    {left: 0; background-color: red;}
    50%   {left: 100%; background-color: lightblue;}
    100%  {left: 0; background-color: red;}
  }
</style>

Note: If you don’t set a property for your animation, then it will just be set to it’s default. So if you need to make a change, make sure you have done so.