fix(motion): use correct css property (#326)

* fix(motion): use correct css property

* fix(docs): update docs

packages/motion/README.md

@@ -28,7 +28,7 @@ curves using either Sass or JavaScript.
 ### Sass
 
 `@carbon/motion` exports a `carbon--motion` function and `carbon--motion` mixin that you can use to access the value of a motion
-curve or include that curve as the `transition-property` for a
+curve or include that curve as the `transition-timing-function` for a
 selector. To use these helpers, you can do the following in your
 project:
 
@@ -37,12 +37,12 @@ project:
 
 .my-custom-selector {
   // Supplies the standard easing curve, using the productive mode by default
-  transition-property: carbon--motion(standard);
+  transition-timing-function: carbon--motion(standard);
 }
 
 .my-custom-selector-v2 {
   // Supplies the standard easing curve, but with the expressive mode, on the
-  // transition-property property for this selector
+  // transition-timing-function property for this selector
   @include carbon--motion(standard, expressive);
 }
 ```

packages/motion/scss/motion.scss

@@ -21,9 +21,9 @@ $carbon--easings: (
   ),
 );
 
-/// Get the transition property for a given easing and motion mode. Easings that
-/// are currently supported include: standard, entrance, and exit. We also offer
-/// two modes: productive and expressive.
+/// Get the transition-timing-function for a given easing and motion mode.
+/// Easings that are currently supported include: standard, entrance, and exit.
+/// We also offer two modes: productive and expressive.
 /// @param {String} $name - the name of the easing curve to apply
 /// @param {String} $mode - the mode for the easing curve to use
 /// @return {cubic-bezier}
@@ -40,9 +40,9 @@ $carbon--easings: (
   }
 }
 
-/// Set the transition-property for a given easing and motion mode.
+/// Set the transition-timing-function for a given easing and motion mode.
 /// @param {String} $name - the name of the easing curve to apply
 /// @param {String} $mode - the mode for the easing curve to use
 @mixin carbon--motion($name, $mode) {
-  transition-property: carbon--motion($name, $mode);
+  transition-timing-function: carbon--motion($name, $mode);
 }