JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<img src="https://www.kikk.be/2017/files/templates/kikk2017/public/assets/images/team/gilles.jpg" alt="Dude" />

CSS

img {
    -webkit-animation-name: steam;
    -webkit-animation-duration: .5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-name: steam;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    position: relative;
}
@-webkit-keyframes steam {
    0%, 100% {
        -webkit-transform: skewX(0deg);
        opacity: 1;        
    }
    25% { -webkit-transform: skewX(10deg); opacity: .8; }
    75% { -webkit-transform: skewX(-10deg); opacity: .8; }
}
@keyframes steam {
    0%, 100% {
        transform: skewX(0deg);
        opacity: 1;        
    }
    25% { transform: skewX(10deg); opacity: .8; }
    75% { transform: skewX(-10deg); opacity: .8; }
}