diff --git a/components/style/properties/gecko.mako.rs b/components/style/properties/gecko.mako.rs
index e8236806d7bf..16a55c72689f 100644
--- a/components/style/properties/gecko.mako.rs
+++ b/components/style/properties/gecko.mako.rs
@@ -3081,6 +3081,13 @@ fn static_assert() {
         };
 
         unsafe {
+            use gecko_bindings::structs::nsCSSKeyword;
+            use values::computed::Angle;
+
+            let get_array_angle = || -> Angle {
+                bindings::Gecko_CSSValue_GetArrayItemConst(gecko_value, 1).get_angle()
+            };
+
             match transform_function {
                 ${computed_operation_arm("Matrix", "matrix3d", ["number"] * 16)}
                 ${computed_operation_arm("Skew", "skew", ["angle"] * 2)}
@@ -3092,7 +3099,29 @@ fn static_assert() {
                                          ["list"] * 2 + ["percentage"])}
                 ${computed_operation_arm("AccumulateMatrix", "accumulatematrix",
                                          ["list"] * 2 + ["percentage_to_integer"])}
-                _ => panic!("We shouldn't set any other transform function types"),
+                // FIXME: Bug 1391145 will introduce new types for these keywords. For now, we
+                // temporarily don't use |computed_operation_arm| because these are special cases
+                // for compositor animations when we use Gecko style backend on the main thread,
+                // and I don't want to add too many special cases in |computed_operation_arm|.
+                //
+                // Note: Gecko only converts translate and scale into the corresponding primitive
+                // functions, so we still need to handle the following functions.
+                nsCSSKeyword::eCSSKeyword_skewx => {
+                    ComputedOperation::Skew(get_array_angle(), Angle::zero())
+                },
+                nsCSSKeyword::eCSSKeyword_skewy => {
+                    ComputedOperation::Skew(Angle::zero(), get_array_angle())
+                },
+                nsCSSKeyword::eCSSKeyword_rotatex => {
+                    ComputedOperation::Rotate(1.0, 0.0, 0.0, get_array_angle())
+                },
+                nsCSSKeyword::eCSSKeyword_rotatey => {
+                    ComputedOperation::Rotate(0.0, 1.0, 0.0, get_array_angle())
+                },
+                nsCSSKeyword::eCSSKeyword_rotatez | nsCSSKeyword::eCSSKeyword_rotate => {
+                    ComputedOperation::Rotate(0.0, 0.0, 1.0, get_array_angle())
+                },
+                _ => panic!("{:?} is not an acceptable transform function", transform_function),
             }
         }
     }