Getting jank on CSS transform

With the following CSS, I am preparing my segment message to slide across the viewport:

.Segment {
    position: absolute;
    width: 100%;
    overflow: hidden;
    top: -5px;
    top: 0;
    outline: 1px solid orange;
}

.Segment__message {
  display: inline-block;
  margin-top: 15px;
  left: 100%;
  transform: translateX(0);
  position: relative;
  padding-left: 10px;
  will-change: transform;
  font-size: 30px;
}

If I apply the following styles dynamically, I am getting some very slight jank:

var message = document.querySelector(".Segment__message");
message.style = "transition: all 20s linear; transform: translateX(calc(-100vw - 100%))"

It is pretty subtle, but is much more noticeable on the 75" screen this will be displayed on.

Using Chrome's perf tools, I can see some FPS degradation, with it dropping to 8 FPS at one point. Is there anything I can do to smooth this out further?

https://codepen.io/anon/pen/OrOvdP

from Getting jank on CSS transform