JSFiddle - React, Tailwind, and code Playground

HTML

<img src="https://dl.dropbox.com/u/1722364/little_happy_pinkie_pie_figure_by_miketheuser-d4x7fb0.png" alt="Pinkie Pie bounce!" class="ppbounce" />

<div class="credit"><strong>CSS 3 Animation demo</strong> <br />
    Image used: <a href="http://miketheuser.deviantart.com/art/Little-Happy-Pinkie-Pie-Figure-297638460">Little Happy Pinkie Pie Figure by ~MikeTheUser</a></div>

CSS

.ppbounce {
    animation: bounce 0.8s infinite alternate; 
    -webkit-animation: bounce 0.8s infinite alternate; 
    
    display: block;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

@keyframes bounce {
    from {
        padding-top: 50px;
        margin-top: 300px;
        height: 150px;
        width: 200px;
    }
    
    20% {
        padding-top: 0;
        height: 200px;
    }
    
    to {
        height: 200px;
        margin-top: 0;
        width: 200px;
    }
}

@-webkit-keyframes bounce {
    from {
        padding-top: 50px;
        margin-top: 300px;
        height: 150px;
        width: 200px;
    }
    
    20% {
        padding-top: 0;
        height: 200px;
    }
    
    to {
        height: 200px;
        margin-top: 0;
        width: 200px;
    }
}

.credit {
    position: absolute;
    top: 5px;
    left: 5px;
}

body {
    padding-top: 70px;
    font-family: Arial, san-serif; 
    line-height: 1.4em;
    font-size: 14px;
}

strong {
    font-weight: bold;
    font-size: 18px;
}