JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<div id="float">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ6uw_6wpFz6VWeLQhsUtQlFw7m2H4YCUSK58JQ7aoGO9Vs8ZS1" height="100px" width="100px" alt="bubbles">
</div>

CSS

#float {
    position: relative;
    -webkit-animation: floatBubble 2s infinite  normal ease-out;
    animation: floatBubble 2s infinite  normal ease-out;
}
@-webkit-keyframes floatBubble {
    0% {
        top:500px;
    }
    100% {
        top: 0px;
    }
}
@keyframes floatBubble {
    0% {
        top:500px;
    }
    100% {
        top: 0px;
    }
}