Tinder bubble animation in CSS

HTML
<div class="intro-text"> <h1>Tinder Bubble Animation</h1> </div> <div class="profile-outer-ring"> <div class="profile-image"> <img src="http://www.cesarnogueira.me/images/profilepicCesar2.jpg"> </div>
SASS
body background-color: #212121 font-family: sans-serif color: #F2F2F2 font-size: 0.9rem padding: 0 margin: 0 .profile-outer-ring width: 70px height: 70px position: absolute border-radius: 50% transform: scale(1) top: calc(50% - 35px) left: calc(50% - 35px) cursor: pointer transition: all 250ms ease-in-out &:after content: "" width: 100px height: 100px position: absolute top: -1px left: -1px border: 1px solid rgb(255,107,107) box-shadow: 0px 0px 5px rgba(255,107,107,0.3) border-radius: 50% animation-duration: 2.5s animation-name: bubble-bounce animation-iteration-count: infinite .profile-image width: 100px height: 100px background: #F2F2F2 position: relative border-radius: 50% top: calc(50% - 35px) left: calc(50% - 35px) z-index: 999 overflow: hidden img width: 100% .intro-text position: absolute top: calc(50% - 150px) left: 0 width: 100% text-align: center h1 padding: 0 margin: 0 @keyframes bubble-bounce 0% transform: scale(1) opacity: 1 87% transform: scale(2.3) opacity: 1 100% opacity: 0
JAVASCRIPT
Expand for more options Login