JSFiddle - React, Tailwind, and code Playground

by tikosar

HTML

<div class="test">Why am I pulsing in Chrome? :(</div>

CSS

.test {
	--x: 0;
	--y: 0;
	background: green;
	width: 100px;
	height: 100px;
	animation: pulse 1s infinite alternate;
	transform: translate(var(--x));
}

@keyframes pulse {
	to {
		transform: translate(var(--x));
	}
}

JavaScript

const el = document.querySelector('.test')

function pos() {
	el.style.setProperty('--x', '200px')
}

setTimeout(pos, 1000)