diff --git a/components/style/properties/data.py b/components/style/properties/data.py
index 1add6d93148c..04da7ad225b8 100644
--- a/components/style/properties/data.py
+++ b/components/style/properties/data.py
@@ -16,54 +16,6 @@ def to_camel_case(ident):
     return re.sub("(^|_|-)([a-z])", lambda m: m.group(2).upper(), ident.strip("_").strip("-"))
 
 
-# https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
-def is_known_animatable_property(name):
-    return name in [
-        "-moz-outline-radius", "-moz-outline-radius-bottomleft",
-        "-moz-outline-radius-bottomright", "-moz-outline-radius-topleft",
-        "-moz-outline-radius-topright", "-webkit-text-fill-color",
-        "-webkit-text-stroke", "-webkit-text-stroke-color",
-        "-webkit-touch-callout", "all", "backdrop-filter", "background",
-        "background-color", "background-position", "background-size", "border",
-        "border-bottom", "border-bottom-color", "border-bottom-left-radius",
-        "border-bottom-right-radius", "border-bottom-width", "border-color",
-        "border-left", "border-left-color", "border-left-width", "border-radius",
-        "border-right", "border-right-color", "border-right-width", "border-top",
-        "border-top-color", "border-top-left-radius", "border-top-right-radius",
-        "border-top-width", "border-width", "bottom", "box-shadow", "clip",
-        "clip-path", "color", "column-count", "column-gap", "column-rule",
-        "column-rule-color", "column-rule-width", "column-width", "columns",
-        "filter", "flex", "flex-basis", "flex-grow", "flex-shrink", "font",
-        "font-size", "font-size-adjust", "font-stretch", "font-weight",
-        "grid-column-gap", "grid-gap", "grid-row-gap", "height", "left",
-        "letter-spacing", "line-height", "margin", "margin-bottom",
-        "margin-left", "margin-right", "margin-top", "mask", "mask-position",
-        "mask-size", "max-height", "max-width", "min-height", "min-width",
-        "motion-offset", "motion-rotation", "object-position", "opacity",
-        "order", "outline", "outline-color", "outline-offset", "outline-width",
-        "padding", "padding-bottom", "padding-left", "padding-right",
-        "padding-top", "perspective", "perspective-origin", "right",
-        "scroll-snap-coordinate", "scroll-snap-destination",
-        "shape-image-threshold", "shape-margin", "shape-outside",
-        "text-decoration", "text-decoration-color", "text-emphasis",
-        "text-emphasis-color", "text-indent", "text-shadow", "top", "transform",
-        "transform-origin", "vertical-align", "visibility", "width",
-        "word-spacing", "z-index"
-    ]
-
-
-# FIXME: Servo doesn't support some animatable properties yet,those are in the
-# following list, and can be implemented removing it from the list and
-# implementing the Interpolate trait in helpers/animated_properties.mako.rs
-def is_not_supported_animatable_property(name):
-    return name in [
-        "flex-basis", "column-width", "column-height", "column-count",
-        "column-gap", "clip", "filter", "transform-origin",
-        "perspective-origin", "font-stretch", "letter-spacing", "word-spacing",
-        "text-decoration"
-    ]
-
-
 class Keyword(object):
     def __init__(self, name, values, gecko_constant_prefix=None,
                  extra_gecko_values=None, extra_servo_values=None):
@@ -93,9 +45,9 @@ def gecko_constant(self, value):
 
 
 class Longhand(object):
-    def __init__(self, style_struct, name, derived_from=None, keyword=None,
+    def __init__(self, style_struct, name, animatable=None, derived_from=None, keyword=None,
                  predefined_type=None, custom_cascade=False, experimental=False, internal=False,
-                 need_clone=False, gecko_ffi_name=None, animatable=None):
+                 need_clone=False, gecko_ffi_name=None):
         self.name = name
         self.keyword = keyword
         self.predefined_type = predefined_type
@@ -108,10 +60,16 @@ def __init__(self, style_struct, name, derived_from=None, keyword=None,
         self.need_clone = need_clone
         self.gecko_ffi_name = gecko_ffi_name or "m" + self.camel_case
         self.derived_from = (derived_from or "").split()
-        if animatable is not None:
+
+        # This is done like this since just a plain bool argument seemed like
+        # really random.
+        if animatable is None:
+            raise TypeError("animatable should be specified for " + name + ")")
+        if isinstance(animatable, bool):
             self.animatable = animatable
         else:
-            self.animatable = is_known_animatable_property(name) and not is_not_supported_animatable_property(name)
+            assert animatable == "True" or animatable == "False"
+            self.animatable = animatable == "True"
 
 
 class Shorthand(object):
diff --git a/components/style/properties/helpers/animated_properties.mako.rs b/components/style/properties/helpers/animated_properties.mako.rs
index da6887e4abd2..3b75b4ee07b3 100644
--- a/components/style/properties/helpers/animated_properties.mako.rs
+++ b/components/style/properties/helpers/animated_properties.mako.rs
@@ -20,6 +20,7 @@ use properties::longhands::box_shadow::computed_value::BoxShadow;
 use properties::longhands::transform::computed_value::ComputedMatrix;
 use properties::longhands::transform::computed_value::ComputedOperation as TransformOperation;
 use properties::longhands::transform::computed_value::T as TransformList;
+use properties::longhands::transform_origin::computed_value::T as TransformOrigin;
 use properties::longhands::vertical_align::computed_value::T as VerticalAlign;
 use properties::longhands::visibility::computed_value::T as Visibility;
 use properties::longhands::z_index::computed_value::T as ZIndex;
@@ -821,6 +822,31 @@ impl Interpolate for LengthOrNone {
     }
 }
 
+impl Interpolate for TransformOrigin {
+    fn interpolate(&self, other: &Self, time: f64) -> Option<Self> {
+        let horizontal = match self.horizontal.interpolate(&other.horizontal, time) {
+            Some(h) => h,
+            None => return None,
+        };
+
+        let vertical = match self.vertical.interpolate(&other.vertical, time) {
+            Some(v) => v,
+            None => return None,
+        };
+
+        let depth = match self.depth.interpolate(&other.depth, time) {
+            Some(d) => d,
+            None => return None,
+        };
+
+        Some(TransformOrigin {
+            horizontal: horizontal,
+            vertical: vertical,
+            depth: depth,
+        })
+    }
+}
+
 /// https://drafts.csswg.org/css-transforms/#interpolation-of-transforms
 impl Interpolate for TransformList {
     #[inline]
diff --git a/components/style/properties/longhand/background.mako.rs b/components/style/properties/longhand/background.mako.rs
index b31a27d7ed83..c2ed7d3da7e7 100644
--- a/components/style/properties/longhand/background.mako.rs
+++ b/components/style/properties/longhand/background.mako.rs
@@ -5,11 +5,12 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <% data.new_style_struct("Background", inherited=False) %>
-${helpers.predefined_type(
-    "background-color", "CSSColor",
-    "::cssparser::Color::RGBA(::cssparser::RGBA { red: 0., green: 0., blue: 0., alpha: 0. }) /* transparent */")}
 
-<%helpers:longhand name="background-image">
+${helpers.predefined_type("background-color", "CSSColor",
+    "::cssparser::Color::RGBA(::cssparser::RGBA { red: 0., green: 0., blue: 0., alpha: 0. }) /* transparent */",
+    animatable=True)}
+
+<%helpers:longhand name="background-image" animatable="False">
     use cssparser::ToCss;
     use std::fmt;
     use values::specified::Image;
@@ -71,7 +72,7 @@ ${helpers.predefined_type(
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="background-position">
+<%helpers:longhand name="background-position" animatable="True">
         use cssparser::ToCss;
         use std::fmt;
         use values::LocalToCss;
@@ -186,15 +187,23 @@ ${helpers.predefined_type(
         }
 </%helpers:longhand>
 
-${helpers.single_keyword("background-repeat", "repeat repeat-x repeat-y no-repeat")}
+${helpers.single_keyword("background-repeat",
+                         "repeat repeat-x repeat-y no-repeat",
+                         animatable=False)}
 
-${helpers.single_keyword("background-attachment", "scroll fixed" + (" local" if product == "gecko" else ""))}
+${helpers.single_keyword("background-attachment",
+                         "scroll fixed" + (" local" if product == "gecko" else ""),
+                         animatable=False)}
 
-${helpers.single_keyword("background-clip", "border-box padding-box content-box")}
+${helpers.single_keyword("background-clip",
+                         "border-box padding-box content-box",
+                         animatable=False)}
 
-${helpers.single_keyword("background-origin", "padding-box border-box content-box")}
+${helpers.single_keyword("background-origin",
+                         "padding-box border-box content-box",
+                         animatable=False)}
 
-<%helpers:longhand name="background-size">
+<%helpers:longhand name="background-size" animatable="True">
     use cssparser::{ToCss, Token};
     use std::ascii::AsciiExt;
     use std::fmt;
diff --git a/components/style/properties/longhand/border.mako.rs b/components/style/properties/longhand/border.mako.rs
index 966568615836..57bd1880233f 100644
--- a/components/style/properties/longhand/border.mako.rs
+++ b/components/style/properties/longhand/border.mako.rs
@@ -10,15 +10,19 @@
                                               "bool") for side in ["top", "right", "bottom", "left"]]) %>
 
 % for side in ["top", "right", "bottom", "left"]:
-    ${helpers.predefined_type("border-%s-color" % side, "CSSColor", "::cssparser::Color::CurrentColor")}
+    ${helpers.predefined_type("border-%s-color" % side, "CSSColor",
+                              "::cssparser::Color::CurrentColor",
+                              animatable=True)}
 % endfor
 
 % for side in ["top", "right", "bottom", "left"]:
-    ${helpers.predefined_type("border-%s-style" % side, "BorderStyle", "specified::BorderStyle::none", need_clone=True)}
+    ${helpers.predefined_type("border-%s-style" % side, "BorderStyle",
+                              "specified::BorderStyle::none",
+                              need_clone=True, animatable=False)}
 % endfor
 
 % for side in ["top", "right", "bottom", "left"]:
-    <%helpers:longhand name="border-${side}-width">
+    <%helpers:longhand name="border-${side}-width" animatable="True">
         use app_units::Au;
         use cssparser::ToCss;
         use std::fmt;
@@ -60,13 +64,15 @@
 % for corner in ["top-left", "top-right", "bottom-right", "bottom-left"]:
     ${helpers.predefined_type("border-" + corner + "-radius", "BorderRadiusSize",
                               "computed::BorderRadiusSize::zero()",
-                              "parse")}
+                              "parse",
+                              animatable=True)}
 % endfor
 
-${helpers.single_keyword("box-decoration-break", "slice clone", products="gecko")}
+${helpers.single_keyword("box-decoration-break", "slice clone",
+                         products="gecko", animatable=False)}
 
-${helpers.single_keyword("-moz-float-edge",
-                         "content-box margin-box",
+${helpers.single_keyword("-moz-float-edge", "content-box margin-box",
                          gecko_ffi_name="mFloatEdge",
                          gecko_constant_prefix="NS_STYLE_FLOAT_EDGE",
-                         products="gecko")}
+                         products="gecko",
+                         animatable=False)}
diff --git a/components/style/properties/longhand/box.mako.rs b/components/style/properties/longhand/box.mako.rs
index 4be64fd50aa5..f9f2a4be97c7 100644
--- a/components/style/properties/longhand/box.mako.rs
+++ b/components/style/properties/longhand/box.mako.rs
@@ -11,7 +11,10 @@
                          additional_methods=[Method("transition_count", "usize")]) %>
 
 // TODO(SimonSapin): don't parse `inline-table`, since we don't support it
-<%helpers:longhand name="display" need_clone="True" custom_cascade="${product == 'servo'}">
+<%helpers:longhand name="display"
+                   need_clone="True"
+                   animatable="False"
+                   custom_cascade="${product == 'servo'}">
     <%
         values = """inline block inline-block
             table inline-table table-row-group table-header-group table-footer-group
@@ -86,9 +89,14 @@
 
 </%helpers:longhand>
 
-${helpers.single_keyword("position", "static absolute relative fixed", need_clone=True, extra_gecko_values="sticky")}
+${helpers.single_keyword("position", "static absolute relative fixed",
+                         need_clone=True, extra_gecko_values="sticky", animatable=False)}
 
-<%helpers:single_keyword_computed name="float" values="none left right" need_clone="True" gecko_ffi_name="mFloats">
+<%helpers:single_keyword_computed name="float"
+                                  values="none left right"
+                                  animatable="False"
+                                  need_clone="True"
+                                  gecko_ffi_name="mFloats">
     impl ToComputedValue for SpecifiedValue {
         type ComputedValue = computed_value::T;
 
@@ -107,9 +115,13 @@ ${helpers.single_keyword("position", "static absolute relative fixed", need_clon
 
 </%helpers:single_keyword_computed>
 
-${helpers.single_keyword("clear", "none left right both", gecko_ffi_name="mBreakType")}
+${helpers.single_keyword("clear", "none left right both",
+                         animatable=False, gecko_ffi_name="mBreakType")}
 
-<%helpers:longhand name="-servo-display-for-hypothetical-box" derived_from="display" products="servo">
+<%helpers:longhand name="-servo-display-for-hypothetical-box"
+                   animatable="False"
+                   derived_from="display"
+                   products="servo">
     pub use super::display::{SpecifiedValue, get_initial_value};
     pub use super::display::{parse};
 
@@ -125,7 +137,8 @@ ${helpers.single_keyword("clear", "none left right both", gecko_ffi_name="mBreak
 
 </%helpers:longhand>
 
-<%helpers:longhand name="vertical-align">
+<%helpers:longhand name="vertical-align"
+                   animatable="True">
   use cssparser::ToCss;
   use std::fmt;
 
@@ -219,18 +232,21 @@ ${helpers.single_keyword("clear", "none left right both", gecko_ffi_name="mBreak
 // CSS 2.1, Section 11 - Visual effects
 
 // Non-standard, see https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-box#Specifications
-${helpers.single_keyword("-servo-overflow-clip-box", "padding-box content-box", products="servo",
-               internal=True)}
+${helpers.single_keyword("-servo-overflow-clip-box", "padding-box content-box",
+                         products="servo", animatable=False, internal=True)}
 
-${helpers.single_keyword("overflow-clip-box", "padding-box content-box", products="gecko",
-               internal=True)}
+${helpers.single_keyword("overflow-clip-box", "padding-box content-box",
+                         products="gecko", animatable=False, internal=True)}
 
 // FIXME(pcwalton, #2742): Implement scrolling for `scroll` and `auto`.
-${helpers.single_keyword("overflow-x", "visible hidden scroll auto", need_clone=True,
-                       gecko_constant_prefix="NS_STYLE_OVERFLOW")}
+${helpers.single_keyword("overflow-x", "visible hidden scroll auto",
+                         need_clone=True, animatable=False,
+                         gecko_constant_prefix="NS_STYLE_OVERFLOW")}
 
 // FIXME(pcwalton, #2742): Implement scrolling for `scroll` and `auto`.
-<%helpers:longhand name="overflow-y" need_clone="True">
+<%helpers:longhand name="overflow-y"
+                   need_clone="True"
+                   animatable="False">
   use super::overflow_x;
 
   use cssparser::ToCss;
@@ -269,7 +285,7 @@ ${helpers.single_keyword("overflow-x", "visible hidden scroll auto", need_clone=
 </%helpers:longhand>
 
 // TODO(pcwalton): Multiple transitions.
-<%helpers:longhand name="transition-duration">
+<%helpers:longhand name="transition-duration" animatable="False">
     use values::computed::ComputedValueAsSpecified;
     use values::specified::Time;
 
@@ -327,7 +343,7 @@ ${helpers.single_keyword("overflow-x", "visible hidden scroll auto", need_clone=
 
 // TODO(pcwalton): Lots more timing functions.
 // TODO(pcwalton): Multiple transitions.
-<%helpers:longhand name="transition-timing-function">
+<%helpers:longhand name="transition-timing-function" animatable="False">
     use self::computed_value::{StartEnd, TransitionTimingFunction};
 
     use euclid::point::Point2D;
@@ -525,7 +541,7 @@ ${helpers.single_keyword("overflow-x", "visible hidden scroll auto", need_clone=
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="transition-property">
+<%helpers:longhand name="transition-property" animatable="False">
     pub use self::computed_value::SingleComputedValue as SingleSpecifiedValue;
     pub use self::computed_value::T as SpecifiedValue;
 
@@ -576,14 +592,14 @@ ${helpers.single_keyword("overflow-x", "visible hidden scroll auto", need_clone=
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="transition-delay">
+<%helpers:longhand name="transition-delay" animatable="False">
     pub use properties::longhands::transition_duration::{SingleSpecifiedValue, SpecifiedValue};
     pub use properties::longhands::transition_duration::{computed_value};
     pub use properties::longhands::transition_duration::{get_initial_single_value};
     pub use properties::longhands::transition_duration::{get_initial_value, parse, parse_one};
 </%helpers:longhand>
 
-<%helpers:longhand name="animation-name">
+<%helpers:longhand name="animation-name" animatable="False">
     use values::computed::ComputedValueAsSpecified;
 
     pub mod computed_value {
@@ -629,19 +645,19 @@ ${helpers.single_keyword("overflow-x", "visible hidden scroll auto", need_clone=
     impl ComputedValueAsSpecified for SpecifiedValue {}
 </%helpers:longhand>
 
-<%helpers:longhand name="animation-duration">
+<%helpers:longhand name="animation-duration" animatable="False">
     pub use super::transition_duration::computed_value;
     pub use super::transition_duration::{parse, get_initial_value};
     pub use super::transition_duration::SpecifiedValue;
 </%helpers:longhand>
 
-<%helpers:longhand name="animation-timing-function">
+<%helpers:longhand name="animation-timing-function" animatable="False">
     pub use super::transition_timing_function::computed_value;
     pub use super::transition_timing_function::{parse, get_initial_value};
     pub use super::transition_timing_function::SpecifiedValue;
 </%helpers:longhand>
 
-<%helpers:longhand name="animation-iteration-count">
+<%helpers:longhand name="animation-iteration-count" animatable="False">
     use values::computed::ComputedValueAsSpecified;
 
     pub mod computed_value {
@@ -711,16 +727,19 @@ ${helpers.single_keyword("overflow-x", "visible hidden scroll auto", need_clone=
 </%helpers:longhand>
 
 ${helpers.keyword_list("animation-direction",
-                       "normal reverse alternate alternate-reverse")}
+                       "normal reverse alternate alternate-reverse",
+                       animatable=False)}
 
 ${helpers.keyword_list("animation-play-state",
                        "running paused",
-                       need_clone=True)}
+                       need_clone=True,
+                       animatable=False)}
 
 ${helpers.keyword_list("animation-fill-mode",
-                       "none forwards backwards both")}
+                       "none forwards backwards both",
+                       animatable=False)}
 
-<%helpers:longhand name="animation-delay">
+<%helpers:longhand name="animation-delay" animatable="False">
     pub use super::transition_duration::computed_value;
     pub use super::transition_duration::{parse, get_initial_value};
     pub use super::transition_duration::SpecifiedValue;
@@ -730,43 +749,51 @@ ${helpers.keyword_list("animation-fill-mode",
 // https://www.w3.org/TR/cssom-view-1/
 ${helpers.single_keyword("scroll-behavior",
                          "auto smooth",
-                         products="gecko")}
+                         products="gecko",
+                         animatable=False)}
 
 // Non-standard: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type-x
 ${helpers.single_keyword("scroll-snap-type-x",
                          "none mandatory proximity",
                          products="gecko",
-                         gecko_constant_prefix="NS_STYLE_SCROLL_SNAP_TYPE")}
+                         gecko_constant_prefix="NS_STYLE_SCROLL_SNAP_TYPE",
+                         animatable=False)}
 
 // Non-standard: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type-y
 ${helpers.single_keyword("scroll-snap-type-y",
                          "none mandatory proximity",
                          products="gecko",
-                         gecko_constant_prefix="NS_STYLE_SCROLL_SNAP_TYPE")}
+                         gecko_constant_prefix="NS_STYLE_SCROLL_SNAP_TYPE",
+                         animatable=False)}
 
 // Compositing and Blending Level 1
 // http://www.w3.org/TR/compositing-1/
 ${helpers.single_keyword("isolation",
                          "auto isolate",
-                         products="gecko")}
+                         products="gecko",
+                         animatable=False)}
 
 ${helpers.single_keyword("page-break-after",
                          "auto always avoid left right",
-                         products="gecko")}
+                         products="gecko",
+                         animatable=False)}
 ${helpers.single_keyword("page-break-before",
                          "auto always avoid left right",
-                         products="gecko")}
+                         products="gecko",
+                         animatable=False)}
 ${helpers.single_keyword("page-break-inside",
                          "auto avoid",
                          products="gecko",
                          gecko_ffi_name="mBreakInside",
-                         gecko_constant_prefix="NS_STYLE_PAGE_BREAK")}
+                         gecko_constant_prefix="NS_STYLE_PAGE_BREAK",
+                         animatable=False)}
 
 // CSS Basic User Interface Module Level 3
 // http://dev.w3.org/csswg/css-ui/
 ${helpers.single_keyword("resize",
                          "none both horizontal vertical",
-                         products="gecko")}
+                         products="gecko",
+                         animatable=False)}
 
 // Non-standard
 ${helpers.single_keyword("-moz-appearance",
@@ -793,10 +820,11 @@ ${helpers.single_keyword("-moz-appearance",
                          """,
                          gecko_ffi_name="mAppearance",
                          gecko_constant_prefix="NS_THEME",
-                         products="gecko")}
+                         products="gecko",
+                         animatable=False)}
 
 // Non-standard: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-binding
-<%helpers:longhand name="-moz-binding" products="gecko">
+<%helpers:longhand name="-moz-binding" products="gecko" animatable="False">
     use cssparser::{CssStringWriter, ToCss};
     use gecko_bindings::ptr::{GeckoArcPrincipal, GeckoArcURI};
     use std::fmt::{self, Write};
diff --git a/components/style/properties/longhand/color.mako.rs b/components/style/properties/longhand/color.mako.rs
index fa19eab07262..31368dbe9eeb 100644
--- a/components/style/properties/longhand/color.mako.rs
+++ b/components/style/properties/longhand/color.mako.rs
@@ -6,7 +6,7 @@
 
 <% data.new_style_struct("Color", inherited=True) %>
 
-<%helpers:raw_longhand name="color" need_clone="True">
+<%helpers:raw_longhand name="color" need_clone="True" animatable="True">
     use cssparser::Color as CSSParserColor;
     use cssparser::RGBA;
     use values::specified::{CSSColor, CSSRGBA};
diff --git a/components/style/properties/longhand/column.mako.rs b/components/style/properties/longhand/column.mako.rs
index 6e8975639afd..91e1fc8fc3a7 100644
--- a/components/style/properties/longhand/column.mako.rs
+++ b/components/style/properties/longhand/column.mako.rs
@@ -6,7 +6,8 @@
 
 <% data.new_style_struct("Column", inherited=False) %>
 
-<%helpers:longhand name="column-width" experimental="True">
+// FIXME: This prop should be animatable.
+<%helpers:longhand name="column-width" experimental="True" animatable="False">
     use cssparser::ToCss;
     use std::fmt;
     use values::LocalToCss;
@@ -70,7 +71,8 @@
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="column-count" experimental="True">
+// FIXME: This prop should be animatable.
+<%helpers:longhand name="column-count" experimental="True" animatable="False">
     use cssparser::ToCss;
     use std::fmt;
 
@@ -137,7 +139,8 @@
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="column-gap" experimental="True">
+// FIXME: This prop should be animatable.
+<%helpers:longhand name="column-gap" experimental="True" animatable="False">
     use cssparser::ToCss;
     use std::fmt;
     use values::LocalToCss;
diff --git a/components/style/properties/longhand/counters.mako.rs b/components/style/properties/longhand/counters.mako.rs
index 6dd97da60322..93fdb4bdc2c4 100644
--- a/components/style/properties/longhand/counters.mako.rs
+++ b/components/style/properties/longhand/counters.mako.rs
@@ -6,7 +6,7 @@
 
 <% data.new_style_struct("Counters", inherited=False, gecko_name="Content") %>
 
-<%helpers:longhand name="content">
+<%helpers:longhand name="content" animatable="False">
     use cssparser::Token;
     use std::ascii::AsciiExt;
     use values::computed::ComputedValueAsSpecified;
@@ -171,7 +171,7 @@
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="counter-increment">
+<%helpers:longhand name="counter-increment" animatable="False">
     use std::fmt;
     use super::content;
     use values::computed::ComputedValueAsSpecified;
@@ -241,7 +241,7 @@
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="counter-reset">
+<%helpers:longhand name="counter-reset" animatable="False">
     pub use super::counter_increment::{SpecifiedValue, computed_value, get_initial_value};
     use super::counter_increment::{parse_common};
 
diff --git a/components/style/properties/longhand/effects.mako.rs b/components/style/properties/longhand/effects.mako.rs
index 8781a4b553b5..4fa881c93fd0 100644
--- a/components/style/properties/longhand/effects.mako.rs
+++ b/components/style/properties/longhand/effects.mako.rs
@@ -9,9 +9,10 @@
 
 ${helpers.predefined_type("opacity",
                           "Opacity",
-                          "1.0")}
+                          "1.0",
+                          animatable=True)}
 
-<%helpers:longhand name="box-shadow">
+<%helpers:longhand name="box-shadow" animatable="True">
     use cssparser::{self, ToCss};
     use std::fmt;
     use values::LocalToCss;
@@ -223,7 +224,8 @@ ${helpers.predefined_type("opacity",
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="clip">
+// FIXME: This prop should be animatable
+<%helpers:longhand name="clip" animatable="False">
     use cssparser::ToCss;
     use std::fmt;
     use values::LocalToCss;
@@ -394,7 +396,8 @@ ${helpers.predefined_type("opacity",
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="filter">
+// FIXME: This prop should be animatable
+<%helpers:longhand name="filter" animatable="False">
     //pub use self::computed_value::T as SpecifiedValue;
     use cssparser::ToCss;
     use std::fmt;
@@ -630,7 +633,7 @@ ${helpers.predefined_type("opacity",
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="transform">
+<%helpers:longhand name="transform" animatable="True">
     use app_units::Au;
     use values::CSSFloat;
 
@@ -1174,13 +1177,20 @@ pub fn parse_origin(_: &ParserContext, input: &mut Parser) -> Result<OriginParse
     }
 }
 
-${helpers.single_keyword("backface-visibility", "visible hidden")}
+${helpers.single_keyword("backface-visibility",
+                         "visible hidden",
+                         animatable=False)}
 
-${helpers.single_keyword("transform-box", "border-box fill-box view-box", products="gecko")}
+${helpers.single_keyword("transform-box",
+                         "border-box fill-box view-box",
+                         products="gecko",
+                         animatable=False)}
 
-${helpers.single_keyword("transform-style", "auto flat preserve-3d")}
+${helpers.single_keyword("transform-style",
+                         "auto flat preserve-3d",
+                         animatable=False)}
 
-<%helpers:longhand name="transform-origin">
+<%helpers:longhand name="transform-origin" animatable="True">
     use app_units::Au;
     use values::LocalToCss;
     use values::specified::{Length, LengthOrPercentage, Percentage};
@@ -1261,10 +1271,12 @@ ${helpers.single_keyword("transform-style", "auto flat preserve-3d")}
 </%helpers:longhand>
 
 ${helpers.predefined_type("perspective",
-                  "LengthOrNone",
-                  "computed::LengthOrNone::None")}
+                          "LengthOrNone",
+                          "computed::LengthOrNone::None",
+                          animatable=True)}
 
-<%helpers:longhand name="perspective-origin">
+// FIXME: This prop should be animatable
+<%helpers:longhand name="perspective-origin" animatable="False">
     use values::specified::{LengthOrPercentage, Percentage};
 
     use cssparser::ToCss;
@@ -1337,6 +1349,7 @@ ${helpers.predefined_type("perspective",
 </%helpers:longhand>
 
 ${helpers.single_keyword("mix-blend-mode",
-                 """normal multiply screen overlay darken lighten color-dodge
-                    color-burn hard-light soft-light difference exclusion hue
-                    saturation color luminosity""", gecko_constant_prefix="NS_STYLE_BLEND")}
+                         """normal multiply screen overlay darken lighten color-dodge
+                            color-burn hard-light soft-light difference exclusion hue
+                            saturation color luminosity""", gecko_constant_prefix="NS_STYLE_BLEND",
+                         animatable=False)}
diff --git a/components/style/properties/longhand/font.mako.rs b/components/style/properties/longhand/font.mako.rs
index cf63c578adb8..601097a604c7 100644
--- a/components/style/properties/longhand/font.mako.rs
+++ b/components/style/properties/longhand/font.mako.rs
@@ -8,7 +8,7 @@
 <% data.new_style_struct("Font",
                          inherited=True,
                          additional_methods=[Method("compute_font_hash", is_mut=True)]) %>
-<%helpers:longhand name="font-family">
+<%helpers:longhand name="font-family" animatable="False">
     use self::computed_value::FontFamily;
     use values::computed::ComputedValueAsSpecified;
     pub use self::computed_value::T as SpecifiedValue;
@@ -117,10 +117,15 @@
 </%helpers:longhand>
 
 
-${helpers.single_keyword("font-style", "normal italic oblique", gecko_constant_prefix="NS_FONT_STYLE")}
-${helpers.single_keyword("font-variant", "normal small-caps")}
+${helpers.single_keyword("font-style",
+                         "normal italic oblique",
+                         gecko_constant_prefix="NS_FONT_STYLE",
+                         animatable=False)}
+${helpers.single_keyword("font-variant",
+                         "normal small-caps",
+                         animatable=False)}
 
-<%helpers:longhand name="font-weight" need_clone="True">
+<%helpers:longhand name="font-weight" need_clone="True" animatable="True">
     use cssparser::ToCss;
     use std::fmt;
 
@@ -241,7 +246,7 @@ ${helpers.single_keyword("font-variant", "normal small-caps")}
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="font-size" need_clone="True">
+<%helpers:longhand name="font-size" need_clone="True" animatable="True">
     use app_units::Au;
     use cssparser::ToCss;
     use std::fmt;
@@ -307,8 +312,14 @@ ${helpers.single_keyword("font-variant", "normal small-caps")}
     }
 </%helpers:longhand>
 
+// FIXME: This prop should be animatable
 ${helpers.single_keyword("font-stretch",
-                 "normal ultra-condensed extra-condensed condensed semi-condensed semi-expanded \
-                 expanded extra-expanded ultra-expanded")}
+                         "normal ultra-condensed extra-condensed condensed \
+                          semi-condensed semi-expanded expanded extra-expanded \
+                          ultra-expanded",
+                         animatable=False)}
 
-${helpers.single_keyword("font-kerning", "auto none normal", products="gecko")}
+${helpers.single_keyword("font-kerning",
+                         "auto none normal",
+                         products="gecko",
+                         animatable=False)}
diff --git a/components/style/properties/longhand/inherited_box.mako.rs b/components/style/properties/longhand/inherited_box.mako.rs
index 482780f3a6e8..65fac030ec27 100644
--- a/components/style/properties/longhand/inherited_box.mako.rs
+++ b/components/style/properties/longhand/inherited_box.mako.rs
@@ -6,20 +6,22 @@
 
 <% data.new_style_struct("InheritedBox", inherited=True, gecko_name="Visibility") %>
 
-${helpers.single_keyword("direction", "ltr rtl", need_clone=True)}
+${helpers.single_keyword("direction", "ltr rtl", need_clone=True, animatable=False)}
 
 // TODO: collapse. Well, do tables first.
 ${helpers.single_keyword("visibility",
                          "visible hidden",
                          extra_gecko_values="collapse",
-                         gecko_ffi_name="mVisible")}
+                         gecko_ffi_name="mVisible",
+                         animatable=True)}
 
 // CSS Writing Modes Level 3
 // http://dev.w3.org/csswg/css-writing-modes/
 ${helpers.single_keyword("writing-mode",
                          "horizontal-tb vertical-rl vertical-lr",
                          experimental=True,
-                         need_clone=True)}
+                         need_clone=True,
+                         animatable=False)}
 
 // FIXME(SimonSapin): Add 'mixed' and 'upright' (needs vertical text support)
 // FIXME(SimonSapin): initial (first) value should be 'mixed', when that's implemented
@@ -29,13 +31,16 @@ ${helpers.single_keyword("text-orientation",
                          experimental=True,
                          need_clone=True,
                          extra_gecko_values="mixed upright",
-                         extra_servo_values="sideways-right sideways-left")}
+                         extra_servo_values="sideways-right sideways-left",
+                         animatable=False)}
 
 // CSS Color Module Level 4
 // https://drafts.csswg.org/css-color/
-${helpers.single_keyword("color-adjust", "economy exact", products="gecko")}
+${helpers.single_keyword("color-adjust",
+                         "economy exact", products="gecko",
+                         animatable=False)}
 
-<%helpers:longhand name="image-rendering">
+<%helpers:longhand name="image-rendering" animatable="False">
     pub mod computed_value {
         use cssparser::ToCss;
         use std::fmt;
@@ -92,7 +97,10 @@ ${helpers.single_keyword("color-adjust", "economy exact", products="gecko")}
 
 // Used in the bottom-up flow construction traversal to avoid constructing flows for
 // descendants of nodes with `display: none`.
-<%helpers:longhand name="-servo-under-display-none" derived_from="display" products="servo">
+<%helpers:longhand name="-servo-under-display-none"
+                   derived_from="display"
+                   products="servo"
+                   animatable="False">
     use cssparser::ToCss;
     use std::fmt;
     use values::computed::ComputedValueAsSpecified;
diff --git a/components/style/properties/longhand/inherited_svg.mako.rs b/components/style/properties/longhand/inherited_svg.mako.rs
index ca0c959a3ca2..59e21e60ce5a 100644
--- a/components/style/properties/longhand/inherited_svg.mako.rs
+++ b/components/style/properties/longhand/inherited_svg.mako.rs
@@ -10,36 +10,52 @@
                          inherited=True,
                          gecko_name="SVG") %>
 
+// TODO(emilio): Should some of these types be animatable?
+
 // Section 10 - Text
 
-${helpers.single_keyword("text-anchor", "start middle end", products="gecko")}
+${helpers.single_keyword("text-anchor",
+                         "start middle end",
+                         products="gecko",
+                         animatable=False)}
 
 // Section 11 - Painting: Filling, Stroking and Marker Symbols
-${helpers.single_keyword("color-interpolation", "auto sRGB linearRGB", products="gecko")}
-
-${helpers.single_keyword("color-interpolation-filters",
+${helpers.single_keyword("color-interpolation",
                          "auto sRGB linearRGB",
                          products="gecko",
-                         gecko_constant_prefix="NS_STYLE_COLOR_INTERPOLATION")}
+                         animatable=False)}
 
-${helpers.predefined_type("fill-opacity", "Opacity", "1.0", products="gecko")}
+${helpers.single_keyword("color-interpolation-filters", "auto sRGB linearRGB",
+                         products="gecko",
+                         gecko_constant_prefix="NS_STYLE_COLOR_INTERPOLATION",
+                         animatable=False)}
+
+${helpers.predefined_type("fill-opacity", "Opacity", "1.0",
+                          products="gecko", animatable=False)}
 
-${helpers.single_keyword("fill-rule", "nonzero evenodd", products="gecko")}
+${helpers.single_keyword("fill-rule", "nonzero evenodd",
+                         products="gecko", animatable=False)}
 
 ${helpers.single_keyword("shape-rendering",
                          "auto optimizeSpeed crispEdges geometricPrecision",
-                         products="gecko")}
+                         products="gecko",
+                         animatable=False)}
 
-${helpers.single_keyword("stroke-linecap", "butt round square", products="gecko")}
+${helpers.single_keyword("stroke-linecap", "butt round square",
+                         products="gecko", animatable=False)}
 
-${helpers.single_keyword("stroke-linejoin", "miter round bevel", products="gecko")}
+${helpers.single_keyword("stroke-linejoin", "miter round bevel",
+                         products="gecko", animatable=False)}
 
-${helpers.predefined_type("stroke-miterlimit", "Number", "4.0", "parse_at_least_one",
-                          products="gecko")}
+${helpers.predefined_type("stroke-miterlimit", "Number", "4.0",
+                          "parse_at_least_one", products="gecko",
+                          animatable=False)}
 
-${helpers.predefined_type("stroke-opacity", "Opacity", "1.0", products="gecko")}
+${helpers.predefined_type("stroke-opacity", "Opacity", "1.0",
+                          products="gecko", animatable=False)}
 
 // Section 14 - Clipping, Masking and Compositing
 ${helpers.single_keyword("clip-rule", "nonzero evenodd",
                          products="gecko",
-                         gecko_constant_prefix="NS_STYLE_FILL_RULE")}
+                         gecko_constant_prefix="NS_STYLE_FILL_RULE",
+                         animatable=False)}
diff --git a/components/style/properties/longhand/inherited_table.mako.rs b/components/style/properties/longhand/inherited_table.mako.rs
index 7a11caae0b4b..dd9b468ee1fb 100644
--- a/components/style/properties/longhand/inherited_table.mako.rs
+++ b/components/style/properties/longhand/inherited_table.mako.rs
@@ -6,11 +6,17 @@
 
 <% data.new_style_struct("InheritedTable", inherited=True, gecko_name="TableBorder") %>
 
-${helpers.single_keyword("border-collapse", "separate collapse", gecko_constant_prefix="NS_STYLE_BORDER")}
-${helpers.single_keyword("empty-cells", "show hide", gecko_constant_prefix="NS_STYLE_TABLE_EMPTY_CELLS")}
-${helpers.single_keyword("caption-side", "top bottom", extra_gecko_values="right left top-outside bottom-outside")}
+${helpers.single_keyword("border-collapse", "separate collapse",
+                         gecko_constant_prefix="NS_STYLE_BORDER",
+                         animatable=False)}
+${helpers.single_keyword("empty-cells", "show hide",
+                         gecko_constant_prefix="NS_STYLE_TABLE_EMPTY_CELLS",
+                         animatable=False)}
+${helpers.single_keyword("caption-side", "top bottom",
+                         extra_gecko_values="right left top-outside bottom-outside",
+                         animatable=False)}
 
-<%helpers:longhand name="border-spacing">
+<%helpers:longhand name="border-spacing" animatable="False">
     use app_units::Au;
     use values::LocalToCss;
 
diff --git a/components/style/properties/longhand/inherited_text.mako.rs b/components/style/properties/longhand/inherited_text.mako.rs
index b088e9bf63d2..d902b62739a7 100644
--- a/components/style/properties/longhand/inherited_text.mako.rs
+++ b/components/style/properties/longhand/inherited_text.mako.rs
@@ -6,7 +6,7 @@
 
 <% data.new_style_struct("InheritedText", inherited=True, gecko_name="Text") %>
 
-<%helpers:longhand name="line-height">
+<%helpers:longhand name="line-height" animatable="True">
     use cssparser::ToCss;
     use std::fmt;
     use values::LocalToCss;
@@ -120,7 +120,7 @@
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="text-align">
+<%helpers:longhand name="text-align" animatable="False">
     pub use self::computed_value::T as SpecifiedValue;
     use values::computed::ComputedValueAsSpecified;
     impl ComputedValueAsSpecified for SpecifiedValue {}
@@ -179,7 +179,8 @@
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="letter-spacing">
+// FIXME: This prop should be animatable.
+<%helpers:longhand name="letter-spacing" animatable="False">
     use cssparser::ToCss;
     use std::fmt;
     use values::LocalToCss;
@@ -243,7 +244,7 @@
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="word-spacing">
+<%helpers:longhand name="word-spacing" animatable="False">
     use cssparser::ToCss;
     use std::fmt;
     use values::LocalToCss;
@@ -309,27 +310,33 @@
 
 ${helpers.predefined_type("text-indent",
                           "LengthOrPercentage",
-                          "computed::LengthOrPercentage::Length(Au(0))")}
+                          "computed::LengthOrPercentage::Length(Au(0))",
+                          animatable=True)}
 
 // Also known as "word-wrap" (which is more popular because of IE), but this is the preferred
 // name per CSS-TEXT 6.2.
 ${helpers.single_keyword("overflow-wrap",
                          "normal break-word",
-                         gecko_constant_prefix="NS_STYLE_OVERFLOWWRAP")}
+                         gecko_constant_prefix="NS_STYLE_OVERFLOWWRAP",
+                         animatable=False)}
 
 // TODO(pcwalton): Support `word-break: keep-all` once we have better CJK support.
 ${helpers.single_keyword("word-break",
                          "normal break-all",
                          extra_gecko_values="keep-all",
-                         gecko_constant_prefix="NS_STYLE_WORDBREAK")}
+                         gecko_constant_prefix="NS_STYLE_WORDBREAK",
+                         animatable=False)}
 
 // TODO(pcwalton): Support `text-justify: distribute`.
 ${helpers.single_keyword("text-justify",
                          "auto none inter-word",
-                         products="servo")}
+                         products="servo",
+                         animatable=False)}
 
 <%helpers:longhand name="-servo-text-decorations-in-effect"
-                derived_from="display text-decoration" need_clone="True" products="servo">
+                   derived_from="display text-decoration"
+                   need_clone="True" products="servo"
+                   animatable="False">
     use cssparser::{RGBA, ToCss};
     use std::fmt;
 
@@ -410,8 +417,10 @@ ${helpers.single_keyword("text-justify",
     }
 </%helpers:longhand>
 
-<%helpers:single_keyword_computed name="white-space" values="normal pre nowrap pre-wrap pre-line",
-                                  gecko_constant_prefix="NS_STYLE_WHITESPACE">
+<%helpers:single_keyword_computed name="white-space"
+                                  values="normal pre nowrap pre-wrap pre-line"
+                                  gecko_constant_prefix="NS_STYLE_WHITESPACE"
+                                  animatable="False">
     use values::computed::ComputedValueAsSpecified;
     impl ComputedValueAsSpecified for SpecifiedValue {}
 
@@ -448,7 +457,7 @@ ${helpers.single_keyword("text-justify",
     }
 </%helpers:single_keyword_computed>
 
-<%helpers:longhand name="text-shadow">
+<%helpers:longhand name="text-shadow" animatable="True">
     use cssparser::{self, ToCss};
     use std::fmt;
     use values::LocalToCss;
@@ -635,16 +644,22 @@ ${helpers.single_keyword("text-justify",
 // TODO(pcwalton): `full-width`
 ${helpers.single_keyword("text-transform",
                          "none capitalize uppercase lowercase",
-                         extra_gecko_values="full-width")}
+                         extra_gecko_values="full-width",
+                         animatable=False)}
 
-${helpers.single_keyword("text-rendering", "auto optimizespeed optimizelegibility geometricprecision")}
+${helpers.single_keyword("text-rendering",
+                         "auto optimizespeed optimizelegibility geometricprecision",
+                         animatable=False)}
 
 // CSS Text Module Level 3
 // https://www.w3.org/TR/css-text-3/
-${helpers.single_keyword("hyphens", "none manual auto", products="gecko")}
+${helpers.single_keyword("hyphens", "none manual auto",
+                         products="gecko", animatable=False)}
 
 // CSS Ruby Layout Module Level 1
 // https://www.w3.org/TR/css-ruby-1/
-${helpers.single_keyword("ruby-align", "start center space-between space-around", products="gecko")}
+${helpers.single_keyword("ruby-align", "start center space-between space-around",
+                         products="gecko", animatable=False)}
 
-${helpers.single_keyword("ruby-position", "over under", products="gecko")}
+${helpers.single_keyword("ruby-position", "over under",
+                         products="gecko", animatable=False)}
diff --git a/components/style/properties/longhand/list.mako.rs b/components/style/properties/longhand/list.mako.rs
index 298f387cf133..c5d5c6be5b09 100644
--- a/components/style/properties/longhand/list.mako.rs
+++ b/components/style/properties/longhand/list.mako.rs
@@ -6,7 +6,7 @@
 
 <% data.new_style_struct("List", inherited=True) %>
 
-${helpers.single_keyword("list-style-position", "outside inside")}
+${helpers.single_keyword("list-style-position", "outside inside", animatable=False)}
 
 // TODO(pcwalton): Implement the full set of counter styles per CSS-COUNTER-STYLES [1] 6.1:
 //
@@ -23,9 +23,10 @@ ${helpers.single_keyword("list-style-type", """
                            myanmar oriya persian telugu thai tibetan cjk-earthly-branch
                            cjk-heavenly-stem lower-greek hiragana hiragana-iroha katakana
                            katakana-iroha""",
-    gecko_constant_prefix="NS_STYLE_LIST_STYLE")}
+    gecko_constant_prefix="NS_STYLE_LIST_STYLE",
+    animatable=False)}
 
-<%helpers:longhand name="list-style-image">
+<%helpers:longhand name="list-style-image" animatable="False">
     use cssparser::{ToCss, Token};
     use std::fmt;
     use url::Url;
@@ -92,7 +93,7 @@ ${helpers.single_keyword("list-style-type", """
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="quotes">
+<%helpers:longhand name="quotes" animatable="False">
     use std::borrow::Cow;
     use std::fmt;
     use values::computed::ComputedValueAsSpecified;
diff --git a/components/style/properties/longhand/margin.mako.rs b/components/style/properties/longhand/margin.mako.rs
index a9e4e477bbd5..32f5243d7456 100644
--- a/components/style/properties/longhand/margin.mako.rs
+++ b/components/style/properties/longhand/margin.mako.rs
@@ -8,5 +8,6 @@
 
 % for side in ["top", "right", "bottom", "left"]:
     ${helpers.predefined_type("margin-" + side, "LengthOrPercentageOrAuto",
-                              "computed::LengthOrPercentageOrAuto::Length(Au(0))")}
+                              "computed::LengthOrPercentageOrAuto::Length(Au(0))",
+                              animatable=True)}
 % endfor
diff --git a/components/style/properties/longhand/outline.mako.rs b/components/style/properties/longhand/outline.mako.rs
index cfe24868d29a..0869df7a657d 100644
--- a/components/style/properties/longhand/outline.mako.rs
+++ b/components/style/properties/longhand/outline.mako.rs
@@ -10,9 +10,10 @@
                          additional_methods=[Method("outline_has_nonzero_width", "bool")]) %>
 
 // TODO(pcwalton): `invert`
-${helpers.predefined_type("outline-color", "CSSColor", "::cssparser::Color::CurrentColor")}
+${helpers.predefined_type("outline-color", "CSSColor", "::cssparser::Color::CurrentColor",
+                          animatable=True)}
 
-<%helpers:longhand name="outline-style" need_clone="True">
+<%helpers:longhand name="outline-style" need_clone="True" animatable="False">
     pub use values::specified::BorderStyle as SpecifiedValue;
     pub fn get_initial_value() -> SpecifiedValue { SpecifiedValue::none }
     pub mod computed_value {
@@ -26,7 +27,7 @@ ${helpers.predefined_type("outline-color", "CSSColor", "::cssparser::Color::Curr
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="outline-width">
+<%helpers:longhand name="outline-width" animatable="True">
     use app_units::Au;
     use cssparser::ToCss;
     use std::fmt;
@@ -60,10 +61,12 @@ ${helpers.predefined_type("outline-color", "CSSColor", "::cssparser::Color::Curr
 </%helpers:longhand>
 
 // The -moz-outline-radius-* properties are non-standard and not on a standards track.
+// TODO: Should they animate?
 % for corner in ["topleft", "topright", "bottomright", "bottomleft"]:
     ${helpers.predefined_type("-moz-outline-radius-" + corner, "BorderRadiusSize",
                               "computed::BorderRadiusSize::zero()",
-                              "parse", products="gecko")}
+                              "parse", products="gecko",
+                              animatable=False)}
 % endfor
 
-${helpers.predefined_type("outline-offset", "Length", "Au(0)")}
+${helpers.predefined_type("outline-offset", "Length", "Au(0)", animatable=True)}
diff --git a/components/style/properties/longhand/padding.mako.rs b/components/style/properties/longhand/padding.mako.rs
index f5448e393deb..f022ba588785 100644
--- a/components/style/properties/longhand/padding.mako.rs
+++ b/components/style/properties/longhand/padding.mako.rs
@@ -9,5 +9,6 @@
 % for side in ["top", "right", "bottom", "left"]:
     ${helpers.predefined_type("padding-" + side, "LengthOrPercentage",
                                "computed::LengthOrPercentage::Length(Au(0))",
-                               "parse_non_negative")}
+                               "parse_non_negative",
+                               animatable=True)}
 % endfor
diff --git a/components/style/properties/longhand/pointing.mako.rs b/components/style/properties/longhand/pointing.mako.rs
index c2ad1502a9e4..2394e2f3bee5 100644
--- a/components/style/properties/longhand/pointing.mako.rs
+++ b/components/style/properties/longhand/pointing.mako.rs
@@ -6,7 +6,7 @@
 
 <% data.new_style_struct("Pointing", inherited=True, gecko_name="UserInterface") %>
 
-<%helpers:longhand name="cursor">
+<%helpers:longhand name="cursor" animatable="False">
     pub use self::computed_value::T as SpecifiedValue;
     use values::computed::ComputedValueAsSpecified;
 
@@ -54,16 +54,20 @@
 // NB: `pointer-events: auto` (and use of `pointer-events` in anything that isn't SVG, in fact)
 // is nonstandard, slated for CSS4-UI.
 // TODO(pcwalton): SVG-only values.
-${helpers.single_keyword("pointer-events", "auto none")}
+${helpers.single_keyword("pointer-events", "auto none", animatable=False)}
 
-${helpers.single_keyword("-moz-user-input", "none enabled disabled", products="gecko",
-                         gecko_ffi_name="mUserInput", gecko_constant_prefix="NS_STYLE_USER_INPUT")}
+${helpers.single_keyword("-moz-user-input", "none enabled disabled",
+                         products="gecko", gecko_ffi_name="mUserInput",
+                         gecko_constant_prefix="NS_STYLE_USER_INPUT",
+                         animatable=False)}
 
-${helpers.single_keyword("-moz-user-modify", "read-only read-write write-only", products="gecko",
-                         gecko_ffi_name="mUserModify", gecko_constant_prefix="NS_STYLE_USER_MODIFY")}
+${helpers.single_keyword("-moz-user-modify", "read-only read-write write-only",
+                         products="gecko", gecko_ffi_name="mUserModify",
+                         gecko_constant_prefix="NS_STYLE_USER_MODIFY",
+                         animatable=False)}
 
 ${helpers.single_keyword("-moz-user-focus",
                          "ignore normal select-after select-before select-menu select-same select-all none",
-                         products="gecko",
-                         gecko_ffi_name="mUserFocus",
-                         gecko_constant_prefix="NS_STYLE_USER_FOCUS")}
+                         products="gecko", gecko_ffi_name="mUserFocus",
+                         gecko_constant_prefix="NS_STYLE_USER_FOCUS",
+                         animatable=False)}
diff --git a/components/style/properties/longhand/position.mako.rs b/components/style/properties/longhand/position.mako.rs
index 5ce0b83f87db..a143dab44c58 100644
--- a/components/style/properties/longhand/position.mako.rs
+++ b/components/style/properties/longhand/position.mako.rs
@@ -8,10 +8,11 @@
 
 % for side in ["top", "right", "bottom", "left"]:
     ${helpers.predefined_type(side, "LengthOrPercentageOrAuto",
-                              "computed::LengthOrPercentageOrAuto::Auto")}
+                              "computed::LengthOrPercentageOrAuto::Auto",
+                              animatable=True)}
 % endfor
 
-<%helpers:longhand name="z-index">
+<%helpers:longhand name="z-index" animatable="True">
     use values::computed::ComputedValueAsSpecified;
 
     impl ComputedValueAsSpecified for SpecifiedValue {}
@@ -62,39 +63,49 @@
 // http://www.w3.org/TR/css3-flexbox/
 
 // Flex container properties
-${helpers.single_keyword("flex-direction", "row row-reverse column column-reverse", experimental=True)}
+${helpers.single_keyword("flex-direction", "row row-reverse column column-reverse",
+                         experimental=True, animatable=False)}
 
-${helpers.single_keyword("flex-wrap", "nowrap wrap wrap-reverse", experimental=True)}
+${helpers.single_keyword("flex-wrap", "nowrap wrap wrap-reverse",
+                         experimental=True, animatable=False)}
 
 // FIXME(stshine): The type of 'justify-content' and 'align-content' is uint16_t in gecko
 // FIXME(stshine): Its higher bytes are used to store fallback value. Disable them in geckolib for now
 ${helpers.single_keyword("justify-content", "flex-start flex-end center space-between space-around",
                          experimental=True,
                          gecko_constant_prefix="NS_STYLE_JUSTIFY",
-                         products="servo")}
+                         products="servo",
+                         animatable=False)}
 
 ${helpers.single_keyword("align-items", "stretch flex-start flex-end center baseline",
                          experimental=True,
                          need_clone=True,
-                         gecko_constant_prefix="NS_STYLE_ALIGN")}
+                         gecko_constant_prefix="NS_STYLE_ALIGN",
+                         animatable=False)}
 
 ${helpers.single_keyword("align-content", "stretch flex-start flex-end center space-between space-around",
                          experimental=True,
                          gecko_constant_prefix="NS_STYLE_ALIGN",
-                         products="servo")}
+                         products="servo",
+                         animatable=False)}
 
 // Flex item properties
-${helpers.predefined_type("flex-grow", "Number", "0.0", "parse_non_negative", experimental=True)}
+${helpers.predefined_type("flex-grow", "Number",
+                          "0.0", "parse_non_negative",
+                          experimental=True, animatable=True)}
 
-${helpers.predefined_type("flex-shrink", "Number", "1.0", "parse_non_negative", experimental=True)}
+${helpers.predefined_type("flex-shrink", "Number",
+                          "1.0", "parse_non_negative",
+                          experimental=True, animatable=True)}
 
 ${helpers.single_keyword("align-self", "auto stretch flex-start flex-end center baseline",
                          experimental=True,
                          need_clone=True,
-                         gecko_constant_prefix="NS_STYLE_ALIGN")}
+                         gecko_constant_prefix="NS_STYLE_ALIGN",
+                         animatable=False)}
 
 // https://drafts.csswg.org/css-flexbox/#propdef-order
-<%helpers:longhand name="order">
+<%helpers:longhand name="order" animatable="True">
     use values::computed::ComputedValueAsSpecified;
 
     impl ComputedValueAsSpecified for SpecifiedValue {}
@@ -115,41 +126,53 @@ ${helpers.single_keyword("align-self", "auto stretch flex-start flex-end center
     }
 </%helpers:longhand>
 
+// FIXME: This property should be animatable.
 ${helpers.predefined_type("flex-basis",
                           "LengthOrPercentageOrAutoOrContent",
-                          "computed::LengthOrPercentageOrAutoOrContent::Auto")}
+                          "computed::LengthOrPercentageOrAutoOrContent::Auto",
+                          animatable=False)}
 
 ${helpers.predefined_type("width",
                           "LengthOrPercentageOrAuto",
                           "computed::LengthOrPercentageOrAuto::Auto",
-                          "parse_non_negative")}
+                          "parse_non_negative",
+                          animatable=True)}
 
 ${helpers.predefined_type("height",
                           "LengthOrPercentageOrAuto",
                           "computed::LengthOrPercentageOrAuto::Auto",
-                          "parse_non_negative")}
+                          "parse_non_negative",
+                          animatable=True)}
 
 ${helpers.predefined_type("min-width",
                           "LengthOrPercentage",
                           "computed::LengthOrPercentage::Length(Au(0))",
-                          "parse_non_negative")}
+                          "parse_non_negative",
+                          animatable=True)}
+
 ${helpers.predefined_type("max-width",
                           "LengthOrPercentageOrNone",
                           "computed::LengthOrPercentageOrNone::None",
-                          "parse_non_negative")}
+                          "parse_non_negative",
+                          animatable=True)}
 
 ${helpers.predefined_type("min-height",
                           "LengthOrPercentage",
                           "computed::LengthOrPercentage::Length(Au(0))",
-                          "parse_non_negative")}
+                          "parse_non_negative",
+                          animatable=True)}
+
 ${helpers.predefined_type("max-height",
                           "LengthOrPercentageOrNone",
                           "computed::LengthOrPercentageOrNone::None",
-                          "parse_non_negative")}
+                          "parse_non_negative",
+                          animatable=True)}
 
 ${helpers.single_keyword("box-sizing",
-                         "content-box border-box")}
+                         "content-box border-box",
+                         animatable=False)}
 
 // CSS Image Values and Replaced Content Module Level 3
 // https://drafts.csswg.org/css-images-3/
-${helpers.single_keyword("object-fit", "fill contain cover none scale-down", products="gecko")}
+${helpers.single_keyword("object-fit", "fill contain cover none scale-down",
+                         products="gecko", animatable=False)}
diff --git a/components/style/properties/longhand/svg.mako.rs b/components/style/properties/longhand/svg.mako.rs
index a9921e46d7df..49dd2bdbdacf 100644
--- a/components/style/properties/longhand/svg.mako.rs
+++ b/components/style/properties/longhand/svg.mako.rs
@@ -6,36 +6,46 @@
 
 <% data.new_style_struct("SVG", inherited=False, gecko_name="SVGReset") %>
 
+// TODO: Which of these should be animatable properties?
 ${helpers.single_keyword("dominant-baseline",
                  """auto use-script no-change reset-size ideographic alphabetic hanging
                     mathematical central middle text-after-edge text-before-edge""",
-                 products="gecko")}
+                 products="gecko",
+                 animatable=False)}
 
-${helpers.single_keyword("vector-effect", "none non-scaling-stroke", products="gecko")}
+${helpers.single_keyword("vector-effect", "none non-scaling-stroke",
+                         products="gecko", animatable=False)}
 
 // Section 13 - Gradients and Patterns
 
 ${helpers.predefined_type(
     "stop-color", "CSSColor",
     "CSSParserColor::RGBA(RGBA { red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0 })",
-    products="gecko")}
+    products="gecko",
+    animatable=False)}
 
-${helpers.predefined_type("stop-opacity", "Opacity", "1.0", products="gecko")}
+${helpers.predefined_type("stop-opacity", "Opacity", "1.0",
+                          products="gecko",
+                          animatable=False)}
 
 // Section 15 - Filter Effects
 
 ${helpers.predefined_type(
     "flood-color", "CSSColor",
     "CSSParserColor::RGBA(RGBA { red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0 })",
-    products="gecko")}
+    products="gecko",
+    animatable=False)}
 
-${helpers.predefined_type("flood-opacity", "Opacity", "1.0", products="gecko")}
+${helpers.predefined_type("flood-opacity", "Opacity",
+                          "1.0", products="gecko", animatable=False)}
 
 ${helpers.predefined_type(
     "lighting-color", "CSSColor",
     "CSSParserColor::RGBA(RGBA { red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0 })",
-    products="gecko")}
+    products="gecko",
+    animatable=False)}
 
 // CSS Masking Module Level 1
 // https://www.w3.org/TR/css-masking-1/
-${helpers.single_keyword("mask-type", "luminance alpha", products="gecko")}
+${helpers.single_keyword("mask-type", "luminance alpha",
+                         products="gecko", animatable=False)}
diff --git a/components/style/properties/longhand/table.mako.rs b/components/style/properties/longhand/table.mako.rs
index cfb3050c06d4..a83d25c7c29b 100644
--- a/components/style/properties/longhand/table.mako.rs
+++ b/components/style/properties/longhand/table.mako.rs
@@ -6,4 +6,5 @@
 
 <% data.new_style_struct("Table", inherited=False) %>
 
-${helpers.single_keyword("table-layout", "auto fixed", gecko_ffi_name="mLayoutStrategy")}
+${helpers.single_keyword("table-layout", "auto fixed",
+                         gecko_ffi_name="mLayoutStrategy", animatable=False)}
diff --git a/components/style/properties/longhand/text.mako.rs b/components/style/properties/longhand/text.mako.rs
index 2e34a0c6243c..50a4ef3476c2 100644
--- a/components/style/properties/longhand/text.mako.rs
+++ b/components/style/properties/longhand/text.mako.rs
@@ -12,12 +12,16 @@
                                              Method("has_overline", "bool"),
                                              Method("has_line_through", "bool")]) %>
 
-${helpers.single_keyword("text-overflow", "clip ellipsis")}
+${helpers.single_keyword("text-overflow", "clip ellipsis", animatable=False)}
 
-${helpers.single_keyword("unicode-bidi", "normal embed isolate bidi-override isolate-override plaintext")}
+${helpers.single_keyword("unicode-bidi",
+                         "normal embed isolate bidi-override isolate-override plaintext",
+                         animatable=False)}
 
+// FIXME: This prop should be animatable.
 <%helpers:longhand name="${'text-decoration' if product == 'servo' else 'text-decoration-line'}"
-                   custom_cascade="${product == 'servo'}">
+                   custom_cascade="${product == 'servo'}"
+                   animatable="False">
     use cssparser::ToCss;
     use std::fmt;
     use values::computed::ComputedValueAsSpecified;
@@ -116,9 +120,11 @@ ${helpers.single_keyword("unicode-bidi", "normal embed isolate bidi-override iso
 
 ${helpers.single_keyword("text-decoration-style",
                          "solid double dotted dashed wavy -moz-none",
-                         products="gecko")}
+                         products="gecko",
+                         animatable=False)}
 
 ${helpers.predefined_type(
     "text-decoration-color", "CSSColor",
     "CSSParserColor::RGBA(RGBA { red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0 })",
-    products="gecko")}
+    products="gecko",
+    animatable=True)}
diff --git a/components/style/properties/longhand/ui.mako.rs b/components/style/properties/longhand/ui.mako.rs
index 6e2fdb345fc4..b78222ab560f 100644
--- a/components/style/properties/longhand/ui.mako.rs
+++ b/components/style/properties/longhand/ui.mako.rs
@@ -9,8 +9,11 @@
 // https://drafts.csswg.org/css-ui-3/
 <% data.new_style_struct("UI", inherited=False, gecko_name="UIReset") %>
 
-${helpers.single_keyword("ime-mode", "normal auto active disabled inactive", products="gecko",
-                         gecko_ffi_name="mIMEMode")}
+${helpers.single_keyword("ime-mode", "normal auto active disabled inactive",
+                         products="gecko", gecko_ffi_name="mIMEMode",
+                         animatable=False)}
 
 ${helpers.single_keyword("-moz-user-select", "auto text none all", products="gecko",
-                         gecko_ffi_name="mUserSelect", gecko_constant_prefix="NS_STYLE_USER_SELECT")}
+                         gecko_ffi_name="mUserSelect",
+                         gecko_constant_prefix="NS_STYLE_USER_SELECT",
+                         animatable=False)}
diff --git a/components/style/properties/longhand/xul.mako.rs b/components/style/properties/longhand/xul.mako.rs
index cb5db00717cc..06af2c2b1a40 100644
--- a/components/style/properties/longhand/xul.mako.rs
+++ b/components/style/properties/longhand/xul.mako.rs
@@ -8,8 +8,11 @@
 // Non-standard properties that Gecko uses for XUL elements.
 <% data.new_style_struct("XUL", inherited=False) %>
 
-${helpers.single_keyword("-moz-box-align", "stretch start center baseline end", products="gecko",
-                         gecko_ffi_name="mBoxAlign", gecko_constant_prefix="NS_STYLE_BOX_ALIGN")}
+${helpers.single_keyword("-moz-box-align", "stretch start center baseline end",
+                         products="gecko", gecko_ffi_name="mBoxAlign",
+                         gecko_constant_prefix="NS_STYLE_BOX_ALIGN",
+                         animatable=False)}
 
-${helpers.predefined_type("-moz-box-flex", "Number", "0.0", "parse_non_negative", products="gecko",
-                          gecko_ffi_name="mBoxFlex")}
+${helpers.predefined_type("-moz-box-flex", "Number", "0.0", "parse_non_negative",
+                          products="gecko", gecko_ffi_name="mBoxFlex",
+                          animatable=False)}