HTML CSS examples for CSS Animation:Pulse
Radiation effect animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .pulses {<!--from w ww . j a va2s .co m--> position: absolute; width: 100%; height: 500px; -webkit-backface-visibility: hidden; } .pulse-shadow { -moz-box-shadow: inset 0px 0px 10px 5px rgba(218, 69, 33, .9); -webkit-box-shadow: inset 0px 0px 10px 5px rgba(218, 69, 33, .9); box-shadow: inset 0px 0px 10px 5px rgba(218, 69, 33, .9); } #pulse1 { border-radius: 50%; position: relative; height: 150px; width: 150px; top: -178px; opacity: 0.3; margin: 0 auto; z-index: -1; border: 1px solid #da4521; background-color: #DA785A; animation: pulsate 3s infinite; -webkit-animation: pulsate 3s infinite; -moz-animation: pulsate 3s infinite; -o-animation: pulsate 3s infinite; animation: pulsate 3s infinite; } @-webkit-keyframes pulsate /* Safari and Chrome */ { 0% { width: 150px; height: 150px; top: -178px; opacity: 0.5; } 90% { width: 900px; height: 900px; top: -550px; opacity: 0.0; border: 3px solid rgba(192, 61, 29, .9) } 99% { width: 900px; height: 900px; top: -550px; opacity: 0.0; border: 3px solid rgba(192, 61, 29, .9) } 100% { width: 900px; height: 0px; top: -550px; opacity: 0.0; border: 3px solid rgba(192, 61, 29, .9) } } @-moz-keyframes pulsate /* Safari and Chrome */ { 0% { width: 150px; height: 150px; top: -178px; opacity: 0.5; } 90% { width: 900px; height: 900px; top: -550px; opacity: 0.0; border: 3px solid rgba(192, 61, 29, .9) } 99% { width: 900px; height: 900px; top: -550px; opacity: 0.0; border: 3px solid rgba(192, 61, 29, .9) } 100% { width: 900px; height: 0px; top: -550px; opacity: 0.0; border: 3px solid rgba(192, 61, 29, .9) } } @keyframes pulsate /* Safari and Chrome */ { 0% { width: 150px; height: 150px; top: -178px; opacity: 0.5; } 90% { width: 900px; height: 900px; top: -550px; opacity: 0.0; border: 3px solid rgba(192, 61, 29, .9) } 99% { width: 900px; height: 900px; top: -550px; opacity: 0.0; border: 3px solid rgba(192, 61, 29, .9) } 100% { width: 900px; height: 0px; top: -550px; opacity: 0.0; border: 3px solid rgba(192, 61, 29, .9) } } -keyframes pulsate /* Safari and Chrome */ { 0% { width: 150px; height: 150px; top: -178px; opacity: 0.5; } 90% { width: 900px; height: 900px; top: -550px; opacity: 0.0; border: 3px solid rgba(192, 61, 29, .9) } 99% { width: 900px; height: 900px; top: -550px; opacity: 0.0; border: 3px solid rgba(192, 61, 29, .9) } 100% { width: 900px; height: 0px; top: -550px; opacity: 0.0; border: 3px solid rgba(192, 61, 29, .9) } } </style> </head> <body> <div class="pulses"> <div id="pulse1"></div> </div> </body> </html>