"Heartbeat Css Animation"
Bootstrap 4.1.1 Snippet by sunil8107

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" relative="stylesheet"> <!-- Include the above in your HEAD tag --> <title> heart Animation</title> </head> <body> <div class="container"> <div clas="animation"> <h1>Heart Animation Using Css keyframe</h1> <div class="heart_img"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH9AvU2jt3jAVK90LFSayYrHnC_XrC1JnrpHoOND1kAXfVYDxA-Q" alt="heaert"></div> </div> </div> </body> </html>
.container{max-width:1170px; margin:auto;} .heart_img{margin:80px 0 0 0;} .heart_img img { animation: 2.5s ease 0s normal none infinite running animateHeartBeat; overflow: inherit; position: relative; display:inline-block; max-width:100px; } @keyframes animateHeartBeat { 0% { transform: scale(1); } 5% { transform: scale(1.4); } 10% { transform: scale(1.3); } 15% { transform: scale(1.8); } 50% { transform: scale(1); } 100% { transform: scale(1); } } @keyframes animateHeartBeat { 0% { transform: scale(1); } 5% { transform: scale(1.4); } 10% { transform: scale(1.3); } 15% { transform: scale(1.8); } 50% { transform: scale(1); } 100% { transform: scale(1); } }

Related: See More


Questions / Comments: