JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<div class="hello">abc</div>
<button type="button">get value</button>

CSS

@keyframes items0 {
  0% { transform: translateX(0); }
  100% { transform: translateX(1000px); }
}

.hello {
  animation: items0 10s linear infinite;
}

JavaScript

// https://stackoverflow.com/a/42267468/4968420
var myElement = document.querySelector('.hello');

function getTranslateX() {
  /* var style = window.getComputedStyle(myElement);
  var matrix = new WebKitCSSMatrix(style.webkitTransform); */
  var matrix = window.getComputedStyle(myElement).transform;
  console.log('translateX: ', matrix.m41, matrix, typeof matrix);
}

document.querySelector('button').addEventListener('click', getTranslateX);