/* 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; } }