JSFiddle - React, Tailwind, and code Playground

by george_black

HTML

<h2>How to fix: add class "webkit-keyframe-fix" to #rounded-corners</h2>
<div title="Google" id="animation2" class="google_logo bounce animated infinite " style=""></div>
<br/><br/><br/>
<div class="rounded-corners " id="rounded-corners" style="">
    <div id="imageClipped" class="imageClipFP ">
        <img class="img" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-pictures.png" />
    </div>
</div>

CSS

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, 30px, 0);
        -ms-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0);
    }
    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, 15px, 0);
        -ms-transform: translate3d(0, 15px, 0);
        transform: translate3d(0, 15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, 4px, 0);
        -ms-transform: translate3d(0, 4px, 0);
        transform: translate3d(0, 4px, 0);
    }
}
.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
}
.google_logo {
    /*background:url(http://google.com/images/srpr/logo11w.png) no-repeat;*/
    background-size:269px 95px;
    height:95px;
    width:269px;
}
.google_logo::after {
    content:'ΔΙΑΚΟΠΑΡΩ!!! ΤΑ ΛΕΜΕ ΣΕ 3 ΜΕΡΕΣ!!!!!';
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated.infinite{
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.imageClipFP {
    margin: 0 auto;
    position: relative;
}
.rounded-corners {
    width:300px;
    height:300px;
    border-radius:...