JSFiddle - React, Tailwind, and code Playground

by ovfiddle

HTML

<div class="smoke" id="smokeA"></div>
<div class="smoke" id="smokeB"></div>

CSS

.smoke {height:10px;width:10px;background:#000;opacity:0.5;/*yeah... "smoke"*/margin:150px;}

JavaScript

setTimeout(function(){
    
    var css_ = '@-webkit-keyframes moveA{ from{ -webkit-transform:translate(0px,0px);} to{ -webkit-transform:translate(0px,-100px);}}';
    css_+='#smokeA {-webkit-animation: moveA 5s infinite; }';
    css_ += '@-webkit-keyframes moveB{ from{ -webkit-transform:translate(0px,0px);} to{ -webkit-transform:translate(-50px,100px);}}';
    css_+='#smokeB {-webkit-animation: moveB 5s infinite; }';
    
    $('head').append('<style type="text/css">'+css_+'</style>');
},5000);