HTML CSS examples for CSS Animation:Pulse
Jumping dots animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .dots-cont {<!-- w ww . ja v a 2 s . c o m--> position: absolute; right: 0px; bottom: 0px; } .dot { width: 12px; height: 12px; background: #22303e; display: inline-block; border-radius: 50%; right: 0px; bottom: 0px; margin: 0px 2.5px; position: relative; animation: jump 1s infinite; } .dots-cont:hover > .dot { /* position: relative; */ /* bottom: 0px; */ animation: none; } .dots-cont .dot-1 { -webkit-animation-delay: 100ms; animation-delay: 100ms; } .dots-cont .dot-2 { -webkit-animation-delay: 200ms; animation-delay: 200ms; } .dots-cont .dot-3 { -webkit-animation-delay: 300ms; animation-delay: 300ms; } @keyframes jump { 0% {bottom: 0px;} 20% {bottom: 5px;} 40% {bottom: 0px;} } </style> </head> <body> <span class="dots-cont"> <span class="dot dot-1"></span> <span class="dot dot-2"></span> <span class="dot dot-3"></span> </span> </body> </html>