JSFiddle - React, Tailwind, and code Playground

HTML

<img src="https://lh3.googleusercontent.com/-uU_C0PBe64k/VSd6800h1bI/AAAAAAAAFM8/hp-vH8wT3U4/w63-h57-no/steam.png" />

SCSS

@mixin steamLeft($speed, $delay) {
	-webkit-animation-name: steamLeft;
	animation-name: steamLeft;
	animation-duration: $speed;
	animation-delay: $delay;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

img {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 93px;
    height: 77px;
    -webkit-animation-name: steamLeft;
	-webkit-animation-name: steamLeft;
	-webkit-animation-duration: 2s;
	-webkit-animation-delay: 0;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes steamLeft {
	0% {
		transform: translateX(-200px) scale(0);
	}

	50% {
		transform: translateX(10px) scale(0.5);
	}

	76% {
		transform: translateX(20px) scale(1);
	}
	100% {
		transform: translateX(-20px) scale(0.7);
	}
}