The @keyframes rule defines the animation timeline, which gradually changes from one set of CSS styles to another.

The @keyframes rules specifies when the style changes will happen in percent, or with the keywords “from” and “to”, which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation has completed.

@keyframes my_animation {
    from {
        top: 0px;
    }
    to {
        top: 500px;
    }
}

@keyframes my_animation {
    0%   {
        top: 0px;
    }
    25%  {
        top: 500px;
    }
    50%  {
        top: 250px;
    }
    75%  {
        top: 500px;
    }
    100% {
        top: 0px;
    }
}

@keyframes my_animation {
    from {
        top: 0px;
        background: red;
    }
    to {
        top: 500px;
        background: blue;
    }
}

These are the allowed values.