diff --git a/packages/css-property-parser/lib/Parser.re b/packages/css-property-parser/lib/Parser.re
index 72ace706d..c3b101d12 100644
--- a/packages/css-property-parser/lib/Parser.re
+++ b/packages/css-property-parser/lib/Parser.re
@@ -1850,9 +1850,9 @@ and single_transition_no_interp = [%value.rec
   "[ <single-transition-property-no-interp> | 'none' ] || <extended-time-no-interp> || <timing-function-no-interp> || <extended-time-no-interp>"
 ]
 and single_transition = [%value.rec
-  "[ [<single-transition-property> | 'none'] <extended-time>]
-  | [ [<single-transition-property> | 'none'] <extended-time> <timing-function>]
-  | [ [<single-transition-property> | 'none'] <extended-time> <timing-function> <extended-time>]"
+  "[ [<single-transition-property> | 'none'] <extended-time> ]
+  | [ [<single-transition-property> | 'none'] <extended-time> <timing-function> ]
+  | [ [<single-transition-property> | 'none'] <extended-time> <timing-function> <extended-time> ]"
 ]
 and single_transition_property = [%value.rec
   "<custom-ident> | <interpolation> | 'all'"
diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re
index 156760174..c91cbcaa4 100644
--- a/packages/ppx/src/Property_to_runtime.re
+++ b/packages/ppx/src/Property_to_runtime.re
@@ -3108,6 +3108,8 @@ let transition_delay =
 let render_transition_property = (~loc) =>
   fun
   | `None => render_string(~loc, "none")
+  | `Single_transition_property_no_interp(x) =>
+    render_single_transition_property_no_interp(~loc, x)
   | `Single_transition_property(x) =>
     render_single_transition_property(~loc, x);
 
@@ -3117,7 +3119,8 @@ let render_single_transition = (~loc) =>
       [%expr
        CSS.Transition.shorthand(
          ~duration=[%e render_extended_time(~loc, duration)],
-         [%e render_transition_property(~loc, property)],
+         ~property=[%e render_transition_property(~loc, property)],
+         (),
        )];
     }
   | `Static_1(property, duration, timingFunction) => {
@@ -3125,7 +3128,8 @@ let render_single_transition = (~loc) =>
        CSS.Transition.shorthand(
          ~duration=[%e render_extended_time(~loc, duration)],
          ~timingFunction=[%e render_timing(~loc, timingFunction)],
-         [%e render_transition_property(~loc, property)],
+         ~property=[%e render_transition_property(~loc, property)],
+         (),
        )];
     }
   | `Static_2(property, duration, timingFunction, delay) => {
@@ -3134,7 +3138,8 @@ let render_single_transition = (~loc) =>
          ~duration=[%e render_extended_time(~loc, duration)],
          ~delay=[%e render_extended_time(~loc, delay)],
          ~timingFunction=[%e render_timing(~loc, timingFunction)],
-         [%e render_transition_property(~loc, property)],
+         ~property=[%e render_transition_property(~loc, property)],
+         (),
        )];
     };
 
@@ -3143,18 +3148,6 @@ let render_single_transition_no_interp =
       ~loc,
       (property, delay, timingFunction, duration): Types.single_transition_no_interp,
     ) => {
-  let property =
-    switch (
-      Option.value(
-        property,
-        ~default=`Single_transition_property_no_interp(`All),
-      )
-    ) {
-    | `None => render_string(~loc, "none")
-    | `Single_transition_property_no_interp(x) =>
-      render_single_transition_property_no_interp(~loc, x)
-    };
-
   [%expr
    CSS.Transition.shorthand(
      ~duration=?[%e
@@ -3164,7 +3157,8 @@ let render_single_transition_no_interp =
      ~timingFunction=?[%e
        render_option(~loc, render_timing_no_interp, timingFunction)
      ],
-     [%e property],
+     ~property=?[%e render_option(~loc, render_transition_property, property)],
+     (),
    )];
 };
 
diff --git a/packages/ppx/test/css-support/transitions.t/input.re b/packages/ppx/test/css-support/transitions.t/input.re
index 8cdeb8f16..9d32a1c84 100644
--- a/packages/ppx/test/css-support/transitions.t/input.re
+++ b/packages/ppx/test/css-support/transitions.t/input.re
@@ -31,8 +31,8 @@
 
 // Interpolation
 let transitions = [|
-  CSS.Transition.shorthand("margin-left"),
-  CSS.Transition.shorthand(~duration=`s(2), "opacity"),
+  CSS.Transition.shorthand(~property="margin-left", ()),
+  CSS.Transition.shorthand(~duration=`s(2), ~property="opacity", ()),
 |];
 let property = "margin-right";
 let timingFunction = `easeOut;
diff --git a/packages/ppx/test/css-support/transitions.t/run.t b/packages/ppx/test/css-support/transitions.t/run.t
index 6cdf6edac..897a2b458 100644
--- a/packages/ppx/test/css-support/transitions.t/run.t
+++ b/packages/ppx/test/css-support/transitions.t/run.t
@@ -41,13 +41,15 @@ If this test fail means that the module is not in sync with the ppx
       ~duration=?Some(`s(2)),
       ~delay=?None,
       ~timingFunction=?None,
-      {js|margin-right|js},
+      ~property=?Some({js|margin-right|js}),
+      (),
     ),
     CSS.Transition.shorthand(
       ~duration=?Some(`ms(500)),
       ~delay=?None,
       ~timingFunction=?None,
-      {js|opacity|js},
+      ~property=?Some({js|opacity|js}),
+      (),
     ),
   |]);
   CSS.transitionList([|
@@ -55,7 +57,8 @@ If this test fail means that the module is not in sync with the ppx
       ~duration=?Some(`s(1)),
       ~delay=?Some(`s(2)),
       ~timingFunction=?Some(`linear),
-      {js|width|js},
+      ~property=?Some({js|width|js}),
+      (),
     ),
   |]);
   CSS.transitionList([|
@@ -63,7 +66,8 @@ If this test fail means that the module is not in sync with the ppx
       ~duration=?None,
       ~delay=?None,
       ~timingFunction=?None,
-      {js|none|js},
+      ~property=?Some({js|none|js}),
+      (),
     ),
   |]);
   CSS.transitionList([|
@@ -71,7 +75,8 @@ If this test fail means that the module is not in sync with the ppx
       ~duration=?None,
       ~delay=?None,
       ~timingFunction=?None,
-      {js|margin-right|js},
+      ~property=?Some({js|margin-right|js}),
+      (),
     ),
   |]);
   CSS.transitionList([|
@@ -79,7 +84,8 @@ If this test fail means that the module is not in sync with the ppx
       ~duration=?None,
       ~delay=?None,
       ~timingFunction=?Some(`easeIn),
-      {js|margin-right|js},
+      ~property=?Some({js|margin-right|js}),
+      (),
     ),
   |]);
   CSS.transitionList([|
@@ -87,7 +93,8 @@ If this test fail means that the module is not in sync with the ppx
       ~duration=?Some(`ms(500)),
       ~delay=?None,
       ~timingFunction=?None,
-      {js|all|js},
+      ~property=?None,
+      (),
     ),
   |]);
   CSS.transitionList([|
@@ -95,7 +102,8 @@ If this test fail means that the module is not in sync with the ppx
       ~duration=?Some(`ms(200)),
       ~delay=?Some(`ms(500)),
       ~timingFunction=?None,
-      {js|all|js},
+      ~property=?None,
+      (),
     ),
   |]);
   CSS.transitionList([|
@@ -103,7 +111,8 @@ If this test fail means that the module is not in sync with the ppx
       ~duration=?None,
       ~delay=?None,
       ~timingFunction=?Some(`linear),
-      {js|all|js},
+      ~property=?None,
+      (),
     ),
   |]);
   CSS.transitionList([|
@@ -111,13 +120,14 @@ If this test fail means that the module is not in sync with the ppx
       ~duration=?Some(`s(1)),
       ~delay=?Some(`ms(500)),
       ~timingFunction=?Some(`linear),
-      {js|margin-right|js},
+      ~property=?Some({js|margin-right|js}),
+      (),
     ),
   |]);
   
   let transitions = [|
-    CSS.Transition.shorthand("margin-left"),
-    CSS.Transition.shorthand(~duration=`s(2), "opacity"),
+    CSS.Transition.shorthand(~property="margin-left", ()),
+    CSS.Transition.shorthand(~duration=`s(2), ~property="opacity", ()),
   |];
   let property = "margin-right";
   let timingFunction = `easeOut;
@@ -128,18 +138,19 @@ If this test fail means that the module is not in sync with the ppx
   (CSS.transitionList(transitions): CSS.rule);
   
   CSS.transitionList([|
-    CSS.Transition.shorthand(~duration, ~delay, ~timingFunction, property),
+    CSS.Transition.shorthand(~duration, ~delay, ~timingFunction, ~property, ()),
   |]);
   CSS.transitionList([|
-    CSS.Transition.shorthand(~duration, ~delay, ~timingFunction, property),
-    CSS.Transition.shorthand(~duration=`s(0), property2),
+    CSS.Transition.shorthand(~duration, ~delay, ~timingFunction, ~property, ()),
+    CSS.Transition.shorthand(~duration=`s(0), ~property=property2, ()),
   |]);
   CSS.transitionList([|
     CSS.Transition.shorthand(
       ~duration=`ms(200),
       ~delay=`s(3),
       ~timingFunction=`easeOut,
-      property,
+      ~property,
+      (),
     ),
   |]);
   CSS.transitionList([|
@@ -147,7 +158,8 @@ If this test fail means that the module is not in sync with the ppx
       ~duration=`ms(200),
       ~delay=`s(3),
       ~timingFunction,
-      property,
+      ~property,
+      (),
     ),
   |]);
   CSS.transitionList([|
@@ -155,7 +167,8 @@ If this test fail means that the module is not in sync with the ppx
       ~duration,
       ~delay=`s(3),
       ~timingFunction,
-      property,
+      ~property,
+      (),
     ),
   |]);
   CSS.transitionList([|
@@ -163,7 +176,8 @@ If this test fail means that the module is not in sync with the ppx
       ~duration,
       ~delay,
       ~timingFunction=`easeOut,
-      {js|margin-right|js},
+      ~property={js|margin-right|js},
+      (),
     ),
   |]);
   CSS.transitionList([|
@@ -171,7 +185,8 @@ If this test fail means that the module is not in sync with the ppx
       ~duration,
       ~delay,
       ~timingFunction=`easeOut,
-      property,
+      ~property,
+      (),
     ),
   |]);
   CSS.transitionList([|
@@ -179,7 +194,8 @@ If this test fail means that the module is not in sync with the ppx
       ~duration=`ms(200),
       ~delay=`s(3),
       ~timingFunction,
-      {js|margin-right|js},
+      ~property={js|margin-right|js},
+      (),
     ),
   |]);
   CSS.transitionList([|
@@ -187,60 +203,72 @@ If this test fail means that the module is not in sync with the ppx
       ~duration=`ms(200),
       ~delay,
       ~timingFunction=`easeOut,
-      {js|margin-right|js},
+      ~property={js|margin-right|js},
+      (),
     ),
   |]);
   CSS.transitionList([|
     CSS.Transition.shorthand(
       ~duration=`ms(200),
       ~timingFunction=`easeIn,
-      property,
+      ~property,
+      (),
     ),
   |]);
   CSS.transitionList([|
-    CSS.Transition.shorthand(~duration=`ms(200), ~timingFunction, property),
+    CSS.Transition.shorthand(
+      ~duration=`ms(200),
+      ~timingFunction,
+      ~property,
+      (),
+    ),
   |]);
   CSS.transitionList([|
     CSS.Transition.shorthand(
       ~duration,
       ~timingFunction=`easeIn,
-      {js|margin-right|js},
+      ~property={js|margin-right|js},
+      (),
     ),
   |]);
   CSS.transitionList([|
-    CSS.Transition.shorthand(~duration, ~timingFunction=`easeIn, property),
+    CSS.Transition.shorthand(~duration, ~timingFunction=`easeIn, ~property, ()),
   |]);
   CSS.transitionList([|
     CSS.Transition.shorthand(
       ~duration=`ms(200),
       ~timingFunction,
-      {js|margin-right|js},
+      ~property={js|margin-right|js},
+      (),
     ),
   |]);
   CSS.transitionList([|
     CSS.Transition.shorthand(
       ~duration=`ms(200),
       ~timingFunction=`easeIn,
-      property,
+      ~property,
+      (),
     ),
   |]);
   CSS.transitionList([|
     CSS.Transition.shorthand(
       ~duration,
       ~timingFunction=`easeIn,
-      {js|margin-right|js},
+      ~property={js|margin-right|js},
+      (),
     ),
   |]);
   CSS.transitionList([|
     CSS.Transition.shorthand(
       ~duration=`ms(200),
       ~timingFunction,
-      {js|margin-right|js},
+      ~property={js|margin-right|js},
+      (),
     ),
   |]);
   CSS.transitionList([|
-    CSS.Transition.shorthand(~duration=`ms(200), property),
+    CSS.Transition.shorthand(~duration=`ms(200), ~property, ()),
   |]);
   CSS.transitionList([|
-    CSS.Transition.shorthand(~duration, {js|margin-right|js}),
+    CSS.Transition.shorthand(~duration, ~property={js|margin-right|js}, ()),
   |]);
diff --git a/packages/runtime/native/shared/Css_types.ml b/packages/runtime/native/shared/Css_types.ml
index f26e54e66..9f3d9feec 100644
--- a/packages/runtime/native/shared/Css_types.ml
+++ b/packages/runtime/native/shared/Css_types.ml
@@ -1098,7 +1098,7 @@ module Transition = struct
     ]
 
   let make ?(duration = `ms 0) ?(delay = `ms 0) ?(timingFunction = `ease)
-    property : t =
+    ?(property = "all") () : t =
     `value { duration; delay; timingFunction; property }
 
   let toString x =
diff --git a/packages/runtime/native/shared/Declarations.ml b/packages/runtime/native/shared/Declarations.ml
index 70983230e..c88373776 100644
--- a/packages/runtime/native/shared/Declarations.ml
+++ b/packages/runtime/native/shared/Declarations.ml
@@ -829,11 +829,11 @@ let transitionList x =
     ( {js|transition|js},
       Kloth.Array.map_and_join ~sep:{js|, |js} ~f:Transition.toString x )
 
-let transition ?duration ?delay ?timingFunction property =
+let transition ?duration ?delay ?timingFunction ?property () =
   Rule.declaration
     ( {js|transition|js},
       Transition.toString
-        (Transition.make ?duration ?delay ?timingFunction property) )
+        (Transition.make ?duration ?delay ?timingFunction ?property ()) )
 
 let transitionDelay i =
   Rule.declaration ({js|transitionDelay|js}, Time.toString i)