JSFiddle - React, Tailwind, and code Playground

by o7thwd

HTML

<img src="//aero.gear.o7th.com/images/main-images/about.jpg" alt="About Us" id="slide">

CSS

body{margin:0;padding:0;}

#slide {
    left:0;
    width:268px;    
    -moz-animation-name: slideOut;
    -moz-animation-iteration-count: once;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 1.5s;
    -webkit-animation-name: slideOut;
    -webkit-animation-iteration-count: once;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 1.5s;
    -o-animation-name: slideOut;
    -o-animation-iteration-count: once;
    -o-animation-timing-function: ease-out;
    -o-animation-duration: 1.5s;
    animation-name: slideOut;
    animation-iteration-count: once;
    animation-timing-function: ease-out;
    animation-duration: 1.5s;
}
@-o-keyframes slideOut {
    0% {
        left: 0;
    }
    100% {
        left: -268px;
    }
}
@keyframes slideOut {
    0% {
        left: 0;
    }
    100% {
        left: -268px;
    }
}
@-moz-keyframes slideOut {
    0% {
        left: 0;
    }
    100% {
        left: -268px;
    }
}
@-webkit-keyframes slideOut {
    0% {
        left: 0;
    }
    100% {
        left: -268px;
    }
}