HTML CSS examples for CSS Animation:Heartbeat
Heart beat animation
<html> <head> <style> .dot<!--from w w w . j av a 2 s .c o m--> { display:block; width:21px; height:21px; border-radius:21px; position:absolute; } .dot1 { -webkit-animation:dot2 3s infinite; top:21px; } .dot2 { -webkit-animation:dot2 3s infinite; left:21px; top:21px; } .dot3 { -webkit-animation:dot2 3s infinite; top:11px; left:16px; } .container { border-style:solid; border-color:Chartreuse; border-width:2px; width:100px; height:100px; } @-webkit-keyframes dot1 { 0% { background-color:yellow; } 50% { background-color:blue; } 100% { background-color:pink; } } </style> </head> <body> <div class="container"> <span class="dot dot1"> </span> <span class="dot dot2"> </span> <span class="dot dot3"> </span> </div> </body> </html>