Get current CSS property value during a transition in JavaScript

I would like to be able to read the value of a CSS property in the middle of a transition before it is fully executed. Is that possible? So if during a transition from 0% to 100%, I were to check halfway through, could I see it at 50%?



Is it possible to get the current css property during a transition in JavaScript?


var timer;

function test(e) {
    var $this;
    $this = $(this);
    timer = setInterval(function () {
    }, 500);
function untest(e) {

    transition: height 10s;
    -moz-transition: height 10s;
    -webkit-transition: height 10s;
    width: 100px;
    height: 100px;
    background-color: #00F;

    height: 300px;
<script src=""></script>

So far I've only tested firefox & chrome, but it appears that you can get the current CSS height via JS.

I can't think of a reason why the browser wouldn't report the change in styles to the DOM during a CSS transition.


Yes, it's possible. The corresponding property on the object returned by getComputedStyle will change gradually over the course of a transition, as shown in this demo:

const box = document.getElementById('box'),
      turnBlueButton = document.getElementById('turnblue'),
      turnPinkButton = document.getElementById('turnpink'),
      computedStyleValueSpan = document.getElementById('computedstylevalue');
turnBlueButton.onclick = () => {
turnPinkButton.onclick = () => {

const computedStyleObj = getComputedStyle(box);

setInterval(() => {
  computedStyleValueSpan.textContent = computedStyleObj.backgroundColor;
}, 50);
#box {
  transition: background-color 10s;
.pink {
  background: pink;
.blue {
  background: blue;
<div id="box" class="pink"></div>

  <code><span id="computedstylevalue"></span></code>

<button id="turnblue">Turn blue</button>
<button id="turnpink">Turn pink</button>

This behaviour is required by spec. states:

The computed value of a property transitions over time from the old value to the new value. Therefore if a script queries the computed value of a property (or other data depending on it) as it is transitioning, it will see an intermediate value that represents the current animated value of the property.

(Hat tip to for their comment pointing out the relevant spec passage.)


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.