HTML CSS examples for CSS Animation:Color
use nth-of-type for non-sibling elements and animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- ww w .j a v a 2 s . co m--> background-color:Chartreuse; } .wrapper { animation:animateBackground 2s forwards; display:inline-block; padding:0.2em; } .wrapper.first { animation-delay:2s; } .wrapper.second { animation-delay:3s; } .wrapper.third { animation-delay:4s; } @keyframes animateBackground { 100% { background-color:yellow; } } </style> </head> <body> <div> Lorem ipsum <span class="wrapper first">Lorem ipsum do</span>Lorem ipsum dolo </div> <div> Lorem ipsum <span class="wrapper second">Lorem ipsum do</span>Lorem ipsum dolo </div> <span class="wrapper third">Lorem ipsum dol</span> </body> </html>