HTML CSS examples for CSS Animation:Slide
Map marker animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .pin {<!--from w ww. ja va 2 s .com--> width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: #00cae9; position: absolute; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); left: 50%; top: 40px; margin: -20px 0 0 -20px; } .pin:after { content: ""; width: 14px; height: 14px; margin: 8px 0 0 8px; background: #e6e6e6; position: absolute; border-radius: 50%; } .bounce { -webkit-animation-name: bounce; -webkit-animation-fill-mode: both; -webkit-animation-duration: 1s; animation-name: bounce; animation-fill-mode: both; animation-duration: 1s; } .pulse { background: #d6d4d4; border-radius: 50%; height: 14px; width: 14px; position: absolute; left: 50%; margin: 11px 0px 0px -12px; transform: rotateX(55deg); -webkit-transform: rotateX(55deg); z-index: -2; } .pulse:after { content: ""; border-radius: 50%; height: 40px; width: 40px; position: absolute; margin: -13px 0 0 -13px; -webkit-animation: pulsate 1s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0; box-shadow: 0 0 1px 2px #00cae9; -webkit-animation-delay: 1.1s; animation: pulsate 1s ease-out; animation-iteration-count: infinite; animation-delay: 1.1s; } @keyframes pulsate { 0% { transform: scale(0.1, 0.1); -webkit-transform: scale(0.1, 0.1); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); opacity: 0; } } @-webkit-keyframes pulsate { 0% { transform: scale(0.1, 0.1); -webkit-transform: scale(0.1, 0.1); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); opacity: 0; } } @keyframes bounce { 0% { opacity: 0; transform: translateY(-2000px) rotate(-45deg); -webkit-transform: translateY(-2000px) rotate(-45deg); } 60% { opacity: 1; transform: translateY(30px) rotate(-45deg); -webkit-transform: translateY(30px) rotate(-45deg); } 80% { transform: translateY(-10px) rotate(-45deg); -webkit-transform: translateY(-10px) rotate(-45deg); } 100% { transform: translateY(0) rotate(-45deg); -webkit-transform: translateY(0) rotate(-45deg); } } @-webkit-keyframes bounce { 0% { opacity: 0; transform: translateY(-2000px) rotate(-45deg); -webkit-transform: translateY(-2000px) rotate(-45deg); } 60% { opacity: 1; transform: translateY(30px) rotate(-45deg); -webkit-transform: translateY(30px) rotate(-45deg); } 80% { transform: translateY(-10px) rotate(-45deg); -webkit-transform: translateY(-10px) rotate(-45deg); } 100% { transform: translateY(0) rotate(-45deg); -webkit-transform: translateY(0) rotate(-45deg); } } </style> </head> <body> <div class="pin bounce"></div> </body> </html>