/*
Define this in your CSS
.bgColor = Replace it by the name you want to give your animation
.bgAnimObj = Assign this class to the object you want to apply the effect
*/
.bgAnimObj {
background: #1abc9c;
/* Chrome, Safari */
-webkit-animation: bgColor 5s;
/* Firefox */
-moz-animation: bgColor 5s;
/* Standard Syntax */
animation: bgColor 5s;
}
/*
Define the keyframe and changes
*/
/* Chrome, Safari */
@-webkit-keyframes bgColor {
from {
background: #1abc9c;
}
to {
background: #ebebeb;
}
}
/* Firefox */
@-moz-keyframes bgColor {
from {
background: #1abc9c;
}
to {
background: #ebebeb;
}
}
/* Standard syntax */
@keyframes bgColor {
from {
background: #1abc9c;
}
to {
background: #ebebeb;
}
}
test