Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
Disable Transition via CSS vs Disable transition via Animation.cancel vs Disable transition via Animation.finish 0.1
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=555009" width="100%" height="500px"></iframe>
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:
one year ago
Test name
Executions per second
Disable transition with css
176.1 Ops/sec
Disable transition with animation.finish
321.2 Ops/sec
Disable transition with animation.cancel
324.6 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()) })