Popover with a cool animation

Taken from Stripe https://stripe.com/blog/towards-transparency

by Alexus fox

HTML

<div class="popover arrow_box">
    <p>This is rad</p>
</div>


<button class="animate-btn">Animate</button>

CSS

.arrow_box {
    position: relative;
    background: #88b7d5;
    border: 2px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #88b7d5;
    border-width: 30px;
    left: 50%;
    margin-left: -30px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #c2e1f5;
    border-width: 24px;
    left: 50%;
    margin-left: -33px;
}





body { font-family: "HelveticaNeue", Helvetica, Arial, sans-serif; font-size: 15px; }
.popover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(rgb(236, 240, 244)));
    padding: 10px;
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.3),0 3px 8px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
text-shadow: 0 0 1px white;
    width: 20%;
    margin: 70px 0 20px 80px;
    -webkit-transition: -webkit-transform 400ms cubic-bezier(0.33, 1.99, 0.66, 0.99),opacity 400ms ease;
    opacity: 0.3;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translateZ(0);
    -webkit-font-smoothing: antialiased;
    -webkit-transform-origin: 50% 90%;
}

.popover:after {
position: absolute;
content: ' ';
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid rgb(236, 240, 244);
    
}

.popover p {
    color: rgb(124, 131, 135);
    font-weight: bold;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

.popover.animate {
    color: green;
    -webkit-transform: translateZ(0) scale3d(1, 1, 1);
    opacity: 1.0;
}

JavaScript

$(".animate-btn").on("click", function() {
  $(".popover").toggleClass("animate");
return false;    
});