--- a/layout/style/nsTransitionManager.cpp
+++ b/layout/style/nsTransitionManager.cpp
@@ -100,16 +100,28 @@ ElementPropertyTransition::UpdateStartVa
     if (StyleAnimationValue::Interpolate(mProperties[0].mProperty,
                                          mReplacedTransition->mFromValue,
                                          mReplacedTransition->mToValue,
                                          valuePosition, startValue)) {
       MOZ_ASSERT(mProperties.Length() == 1 &&
                  mProperties[0].mSegments.Length() == 1,
                  "The transition should have one property and one segment");
       mProperties[0].mSegments[0].mFromValue = Move(startValue);
+      nsCSSValue cssValue;
+      DebugOnly<bool> uncomputeResult =
+        StyleAnimationValue::UncomputeValue(mProperties[0].mProperty,
+                                            startValue,
+                                            cssValue);
+      MOZ_ASSERT(uncomputeResult, "UncomputeValue should not fail");
+      MOZ_ASSERT(mKeyframes.Length() == 2,
+          "Transitions should have exactly two animation keyframes");
+      MOZ_ASSERT(mKeyframes[0].mPropertyValues.Length() == 1,
+          "Transitions should have exactly one property in their first "
+          "frame");
+      mKeyframes[0].mPropertyValues[0].mValue = cssValue;
     }
   }
 
   mReplacedTransition.reset();
 }
 
 ////////////////////////// CSSTransition ////////////////////////////
 

--- a/layout/style/test/file_transitions_replacement_on_busy_frame.html
+++ b/layout/style/test/file_transitions_replacement_on_busy_frame.html
@@ -42,46 +42,51 @@ window.addEventListener("load", function
 
   var div = document.getElementById("target");
   // Start first transition
   div.style.transform = "translateX(300px)";
   getComputedStyle(div);
 
   // Wait for a paint to ensure that the first transition has started.
   waitForAllPaints(function() {
-    var previousMatrix;
+    var previousPropertyValue;
+    var previousKeyframeValue;
     var anim;
     requestAnimationFrame(function() {
       // Start second transition
       div.style.transform = "translateX(0px)";
       getComputedStyle(div).transform;
 
       anim = div.getAnimations()[0];
       var properties = SpecialPowers.wrap(anim.effect).getProperties();
-      previousMatrix = properties[0].values[0].value;
+      previousPropertyValue = properties[0].values[0].value;
+      previousKeyframeValue = anim.effect.getKeyframes()[0].transform;
     });
 
     requestAnimationFrame(function() {
       // Tie up main thread for 300ms. In the meantime, the first transition
       // will continue running on the compositor. If we don't update the start
       // point of the second transition, it will appear to jump when it starts.
       var startTime = performance.now();
       while (performance.now() - startTime < 300);
 
       // Ensure that our paint process has been done.
       // Note that requestAnimationFrame is not suitable here since on Android
       // there is a case where the paint process has not completed even when the
       // requestAnimationFrame callback is run (and it is during the paint
       // process that we update the transition start point).
       waitForAllPaints(function() {
         var properties = SpecialPowers.wrap(anim.effect).getProperties();
-        var currentMatrix = properties[0].values[0].value;
-        isnot(currentMatrix, previousMatrix,
+        var currentPropertyValue = properties[0].values[0].value;
+        isnot(currentPropertyValue, previousPropertyValue,
               "From value of transition is updated since the moment when " +
               "it was generated");
+        isnot(anim.effect.getKeyframes()[0].transform, previousKeyframeValue,
+              "Keyframe value of transition is updated since the moment when " +
+              "it was generated");
         finish();
       });
     });
   });
 });
 
 </script>
 </body>