Run results for: Disable Transition via CSS vs Disable transition via Animation.cancel vs Disable transition via Animation.finish 0.1

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15

Browser: Safari 17

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

Disable transition with animation.cancel

325/s

Disable transition with animation.finish

321/s

Disable transition with css

176/s

View exact numbers

Test name	Executions per second
✓ Disable transition with animation.cancel	325 Ops/sec
Disable transition with animation.finish	321 Ops/sec
Disable transition with css	176 Ops/sec

HTML Preparation code:

<style>
  #root div {
    transition: all 2s;
  }
</style>
<div id="before"></div>
<div style="transition: * 2s;" id="root"></div>

Script Preparation code:

function makeEl(tagName, parent) {
  const newEl = document.createElement(tagName);
  parent.appendChild(newEl);
  return newEl;
}

const rows = 1000; const columns = 10;
const fillRoot = () => {
    var root = document.getElementById('root');
    root && root.innerHTML && (root.innerHTML = '');
    for(let j = 0; j < rows; j++) {
      const row = makeEl('div', root);
      row.setAttribute('style', 'width: 100%');
      for(let i = 0; i < columns; i++) {
        const column = makeEl('div', row);
        column.setAttribute('style','position: fixed; display:inline-block; left: ' + (window.innerWidth/columns*i) + 'px; top: ' + (100*j) + 'px; padding: 5px; width:' + (90/columns) + '%; height: 100px; background-color: #'+(Math.random()*0xFFFFFF<<0).toString(16));
        column.innerHTML = 'item ' + i + ' ' + j;
      }
    }
  }
fillRoot();

Tests:

Disable transition with css
document.querySelectorAll('#root div').forEach(function(el){ el.setAttribute('style','none !important'); el.style['margin-top'] = '100px';})
Disable transition with animation.finish
document.querySelectorAll('#root div').forEach(function(el){ el.style['margin-top'] = '100px'; el.getAnimations().map((animation) => animation.finish()) })
Disable transition with animation.cancel
document.querySelectorAll('#root div').forEach(function(el){ el.style['margin-top'] = '100px'; el.getAnimations().map((animation) => animation.cancel()) })