JSFiddle - React, Tailwind, and code Playground

HTML

<div id="el1"></div>
<div id="fishlogo"></div>
<img src="http://i.imgur.com/lMOmhaM.jpg" style="width: 100%; height: 80px;max-width: 100%;" alt="">

CSS

#el1 {
    margin: 0;
    padding: 0;
    height: 80px;
    background: url("http://i.imgur.com/AO1XwVn.gif") no-repeat right 14px;
    animation-name: anim1;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    -moz-animation-name: anim1;
    -moz-animation-duration: 20s;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-name: anim1;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    position: absolute;
    opacity: .7;
}

@keyframes anim1 {
    from {
        width: 95%;
    }
    to {
        width: 0;
    }
}

@-moz-keyframes anim1 {
    from {
        width: 95%;
    }
    to {
        width: 0;
    }
}

@-webkit-keyframes anim1 {
    from {
        width: 95%;
    }
    to {
        width: 0;
    }
}

#fishlogo {
    margin: 0;
    padding: 0;
    height: 55px;
    background: url("http://i.imgur.com/6MLozsy.png") no-repeat 25px 23px;
    animation-name: fishlogo;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.5, 0.3, 0.25, 0.25);
    -moz-animation-name: fishlogo;
    -moz-animation-duration: 10s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: cubic-bezier(0.5, 0.3, 0.25, 0.25);
    -webkit-animation-name: fishlogo;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.5, 0.3, 0.25, 0.25);
    position: absolute;
}

@keyframes fishlogo {
    from {
        width: 25px;
    }
    to {
        width: 250px;
    }
}

@-moz-keyframes fishlogo {
    from {
        width: 25px;
    }
    to {
        width: 250px;
    }
}

@-webkit-keyframes fishlogo {
    from {
        width: 25px;
    }
    to {
        width: 250px;
    }
}