css transition on translateX activated on height change

Question

I've created an element (used as a header) and a transition property on this element for TranslateX(). The transition is activated when I change the element's height. Here is the codePen for the scenario: Transition on translateX

CSS

.header {
  position: fixed;
  top: 0;
  height: 100px;
  background-color: black;
  transition: translateX() 0;
  transition-duration: 1s;
  width: 100%;
}

JS

function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
      document.querySelector(".header").style.height = "100px";
    } else {
      document.querySelector(".header").style.height = "50px";
    }
    prevScrollpos = currentScrollPos;

}

Why is transition activated on height change?

I saw that transform-origin's value is changing when I change the element's height. Is transform-origin activating translateX?

You can only set transitions per-property and transform, despite its many methods/possibilities, is still a single property. Any rotation, translation, scaling, etc. done on a transform property will obey the transition — diopside

Maciej Kwas Maciej Kwas · Accepted Answer · 2018-07-03T19:48:09

First of all: transition: translateX() 0; is invalid property value and has no effect at all- it is ignored by a browser because of a bad syntax. However, you are setting explicit transition-duration: 1s without any other parameters, so browser is setting default parameters for every other transition property and thus you are getting something like transition: all 1s ease 0s under the hood. So in a result transition is applied to the height. No magic, just dev tools.

See defaults in specification: here

css transition on translateX activated on height change

1 Answers