CSS3 @keyframes Concept

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

OR

@keyframes color_change{
    0%{color:red;}
    100%{color:blue;}
}

This is the process to define a @keyframes now the job is to call the @keyframes in a CLASS or ID.

.text{
    animation-name : color_change;    // To Call the @keyframes by it's name
    animation-iteration-count : 1;        // How many times the process will be reprocess
    animation-duration : 1s;                // How long the process will run in a single execution
}