HTML CSS examples for CSS Animation:Image
Pulsating image rings css animations
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .container {<!--from w w w . j a v a 2 s . c o m--> padding: 20px; } .circle { border: solid 13px black; border-radius: 100%; position: absolute; top: 40px; left: 40px; width: 350px; height: 350px; z-index: 10; -webkit-animation: pulse 3s ease-out; -moz-animation: pulse 3s ease-out; animation: pulse 3s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); opacity: 0.0; } 25% { -moz-transform: scale(1.25); opacity: 0.1; } 50% { -moz-transform: scale(1.5); opacity: 0.3; } 75% { -moz-transform: scale(1.75); opacity: 0.5; } 100% { -moz-transform: scale(2); opacity: 0.0; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); opacity: 0.0; } 1% { -webkit-transform: scale(1.1); opacity: 0.9; } 99% { -webkit-transform: scale(1.9); opacity: 0.01; } 100% { -webkit-transform: scale(2); opacity: 0.0; } } </style> </head> <body> <div class="container"> <img src="https://www.java2s.com/style/demo/Opera.png"> <div class="circle"></div> </div> </body> </html>