--- a/dom/animation/KeyframeUtils.cpp
+++ b/dom/animation/KeyframeUtils.cpp
@@ -1538,16 +1538,23 @@ GetCumulativeDistances(const nsTArray<Co
 
     // Check we have values for all the paceable longhand components.
     if (pacedValues.Length() != pacedPropertyCount) {
       // This keyframe is not paceable, assign kNotPaceable and skip it.
       cumulativeDistances[i] = kNotPaceable;
       continue;
     }
 
+    // Sort the pacedValues first, so the order of subproperties of
+    // pacedValues is always the same as that of prevPacedValues.
+    if (isShorthand) {
+      pacedValues.Sort(
+        TPropertyPriorityComparator<PropertyStyleAnimationValuePair>());
+    }
+
     if (prevPacedValues.IsEmpty()) {
       // This is the first paceable keyframe so its cumulative distance is 0.0.
       cumulativeDistances[i] = 0.0;
     } else {
       double dist = 0.0;
       if (isShorthand) {
         // Apply the distance by the square root of the sum of squares of
         // longhand component distances.