Detect Rendered CSS using a probe container.

detect-rendered-css.js

// This allows you to benchmark CSSinJS libs after styles have been really applied.
 
function detectCSSRendered(className, callback) {
  const probe = document.createElement('div')
  probe.style.visibility = 'hidden'
  probe.className = className
  var style = document.head.appendChild(document.createElement('style'))
  style.textContent = '' +
    '@keyframes probe-animation {' +
    ' from {left: 20%}' +
    ' to {left: 30%}' + 
    '}'

  probe.addEventListener('animationstart', function() {
    probe.parentNode.removeChild(probe)
    style.parentNode.removeChild(style)
    callback()
  })
  document.body.appendChild(probe)
}

// Start detection.
detectCSSRendered('test', function() {
  console.log('CSS Rendered')
})

var style = document.head.appendChild(document.createElement('style'))
// Let CSSinJS library render this style
style.textContent =  '.test {animation: 1s probe-animation;}'