servo: Merge #16292 - Discrete type animations (from hiikezoe:discrete-type-animations); r=emilio,birtles
authorHiroyuki Ikezoe <hikezoe@mozilla.com>
Thu, 06 Apr 2017 20:44:23 -0500
changeset 399806 3315299058de899ef612634359cb0f7abb3132ba
parent 399805 5c6da13f628878f7ec397b5195c5d09d688bbccf
child 399807 3894b9366883168dd8ec8cb3139980d6d57408f0
push id7391
push usermtabara@mozilla.com
push dateMon, 12 Jun 2017 13:08:53 +0000
treeherdermozilla-beta@2191d7f87e2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersemilio, birtles
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
servo: Merge #16292 - Discrete type animations (from hiikezoe:discrete-type-animations); r=emilio,birtles <!-- Please describe your changes on the following line: --> This is a PR of https://bugzilla.mozilla.org/show_bug.cgi?id=1336668 --- <!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: --> - [X] `./mach build -d` does not report any errors - [X] `./mach test-tidy` does not report any errors <!-- Either: --> - [X] These changes do not require tests because there is a test case in web-platform-tests. <!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.--> <!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. --> Source-Repo: https://github.com/servo/servo Source-Revision: 8c2548a0c479d42dbc68ec1b64d028dcf5643dd5
servo/components/style/properties/data.py
servo/components/style/properties/gecko.mako.rs
servo/components/style/properties/helpers/animated_properties.mako.rs
servo/components/style/properties/longhand/background.mako.rs
servo/components/style/properties/longhand/border.mako.rs
servo/components/style/properties/longhand/box.mako.rs
servo/components/style/properties/longhand/color.mako.rs
servo/components/style/properties/longhand/column.mako.rs
servo/components/style/properties/longhand/counters.mako.rs
servo/components/style/properties/longhand/effects.mako.rs
servo/components/style/properties/longhand/font.mako.rs
servo/components/style/properties/longhand/inherited_box.mako.rs
servo/components/style/properties/longhand/inherited_svg.mako.rs
servo/components/style/properties/longhand/inherited_table.mako.rs
servo/components/style/properties/longhand/inherited_text.mako.rs
servo/components/style/properties/longhand/list.mako.rs
servo/components/style/properties/longhand/margin.mako.rs
servo/components/style/properties/longhand/outline.mako.rs
servo/components/style/properties/longhand/padding.mako.rs
servo/components/style/properties/longhand/pointing.mako.rs
servo/components/style/properties/longhand/position.mako.rs
servo/components/style/properties/longhand/svg.mako.rs
servo/components/style/properties/longhand/table.mako.rs
servo/components/style/properties/longhand/text.mako.rs
servo/components/style/properties/longhand/ui.mako.rs
servo/components/style/properties/longhand/xul.mako.rs
--- a/servo/components/style/properties/data.py
+++ b/servo/components/style/properties/data.py
@@ -87,17 +87,17 @@ class Keyword(object):
 def arg_to_bool(arg):
     if isinstance(arg, bool):
         return arg
     assert arg in ["True", "False"]
     return arg == "True"
 
 
 class Longhand(object):
-    def __init__(self, style_struct, name, spec=None, animatable=None, derived_from=None, keyword=None,
+    def __init__(self, style_struct, name, spec=None, animation_type=None, derived_from=None, keyword=None,
                  predefined_type=None, custom_cascade=False, experimental=False, internal=False,
                  need_clone=False, need_index=False, gecko_ffi_name=None, depend_on_viewport_size=False,
                  allowed_in_keyframe_block=True, complex_color=False, cast_type='u8',
                  has_uncacheable_values=False, logical=False, alias=None, extra_prefixes=None, boxed=False,
                  creates_stacking_context=False, fixpos_cb=False, abspos_cb=False):
         self.name = name
         if not spec:
             raise TypeError("Spec should be specified for %s" % name)
@@ -129,19 +129,24 @@ class Longhand(object):
         # > The <declaration-list> inside of <keyframe-block> accepts any CSS property
         # > except those defined in this specification,
         # > but does accept the `animation-play-state` property and interprets it specially.
         self.allowed_in_keyframe_block = allowed_in_keyframe_block \
             and allowed_in_keyframe_block != "False"
 
         # 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 + ")")
-        self.animatable = arg_to_bool(animatable)
+        if animation_type is None:
+            raise TypeError("animation_type should be specified for (" + name + ")")
+        animation_types = ["none", "normal", "discrete"]
+        if animation_type not in animation_types:
+            raise TypeError("animation_type should be one of (" + str(animation_types) + ")")
+        self.animation_type = animation_type
+
+        self.animatable = animation_type != "none"
         if self.logical:
             # Logical properties don't animate separately
             self.animatable = False
         # NB: Animatable implies clone because a property animation requires a
         # copy of the computed value.
         #
         # See components/style/helpers/animated_properties.mako.rs.
         self.need_clone = need_clone or self.animatable
--- a/servo/components/style/properties/gecko.mako.rs
+++ b/servo/components/style/properties/gecko.mako.rs
@@ -1065,16 +1065,22 @@ fn static_assert() {
     ${impl_simple_copy('justify_self', 'mJustifySelf')}
 
     pub fn set_align_items(&mut self, v: longhands::align_items::computed_value::T) {
         self.gecko.mAlignItems = v.0.bits()
     }
 
     ${impl_simple_copy('align_items', 'mAlignItems')}
 
+    pub fn clone_align_items(&self) -> longhands::align_items::computed_value::T {
+        use values::specified::align::{AlignFlags, AlignItems};
+        AlignItems(AlignFlags::from_bits(self.gecko.mAlignItems)
+                                        .expect("mAlignItems contains valid flags"))
+    }
+
     pub fn set_justify_items(&mut self, v: longhands::justify_items::computed_value::T) {
         self.gecko.mJustifyItems = v.0.bits()
     }
 
     ${impl_simple_copy('justify_items', 'mJustifyItems')}
 
     pub fn clone_justify_items(&self) -> longhands::justify_items::computed_value::T {
         use values::specified::align::{AlignFlags, JustifyItems};
--- a/servo/components/style/properties/helpers/animated_properties.mako.rs
+++ b/servo/components/style/properties/helpers/animated_properties.mako.rs
@@ -228,19 +228,26 @@ impl AnimatedProperty {
 
     /// Update `style` with the proper computed style corresponding to this
     /// animation at `progress`.
     pub fn update(&self, style: &mut ComputedValues, progress: f64) {
         match *self {
             % for prop in data.longhands:
                 % if prop.animatable:
                     AnimatedProperty::${prop.camel_case}(ref from, ref to) => {
-                        if let Ok(value) = from.interpolate(to, progress) {
-                            style.mutate_${prop.style_struct.ident.strip("_")}().set_${prop.ident}(value);
-                        }
+                        // https://w3c.github.io/web-animations/#discrete-animation-type
+                        % if prop.animation_type == "discrete":
+                            let value = if progress < 0.5 { *from } else { *to };
+                        % else:
+                            let value = match from.interpolate(to, progress) {
+                                Ok(value) => value,
+                                Err(()) => return,
+                            };
+                        % endif
+                        style.mutate_${prop.style_struct.ident.strip("_")}().set_${prop.ident}(value);
                     }
                 % endif
             % endfor
         }
     }
 
     /// Get an animatable value from a transition-property, an old style, and a
     /// new style.
@@ -420,17 +427,26 @@ impl AnimationValue {
 
 impl Interpolate for AnimationValue {
     fn interpolate(&self, other: &Self, progress: f64) -> Result<Self, ()> {
         match (self, other) {
             % for prop in data.longhands:
                 % if prop.animatable:
                     (&AnimationValue::${prop.camel_case}(ref from),
                      &AnimationValue::${prop.camel_case}(ref to)) => {
-                        from.interpolate(to, progress).map(AnimationValue::${prop.camel_case})
+                        // https://w3c.github.io/web-animations/#discrete-animation-type
+                        % if prop.animation_type == "discrete":
+                            if progress < 0.5 {
+                                Ok(AnimationValue::${prop.camel_case}(*from))
+                            } else {
+                                Ok(AnimationValue::${prop.camel_case}(*to))
+                            }
+                        % else:
+                            from.interpolate(to, progress).map(AnimationValue::${prop.camel_case})
+                        % endif
                     }
                 % endif
             % endfor
             _ => {
                 panic!("Expected interpolation of computed values of the same \
                         property, got: {:?}, {:?}", self, other);
             }
         }
--- a/servo/components/style/properties/longhand/background.mako.rs
+++ b/servo/components/style/properties/longhand/background.mako.rs
@@ -5,19 +5,19 @@
 <%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::transparent())",
     initial_specified_value="SpecifiedValue::transparent()",
     spec="https://drafts.csswg.org/css-backgrounds/#background-color",
-    animatable=True, complex_color=True)}
+    animation_type="normal", complex_color=True)}
 
-<%helpers:vector_longhand name="background-image" animatable="False"
+<%helpers:vector_longhand name="background-image" animation_type="none"
                           spec="https://drafts.csswg.org/css-backgrounds/#the-background-image"
                           has_uncacheable_values="${product == 'gecko'}">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::specified::Image;
 
     pub mod computed_value {
@@ -84,17 +84,17 @@
                 computed_value::T(None) => SpecifiedValue(None),
                 computed_value::T(Some(ref image)) =>
                     SpecifiedValue(Some(ToComputedValue::from_computed_value(image))),
             }
         }
     }
 </%helpers:vector_longhand>
 
-<%helpers:vector_longhand name="background-position-x" animatable="True"
+<%helpers:vector_longhand name="background-position-x" animation_type="normal"
                           spec="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-x"
                           delegate_animate="True">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::specified::position::HorizontalPosition;
 
     #[allow(missing_docs)]
@@ -135,17 +135,17 @@
 
     #[allow(missing_docs)]
     pub fn parse(context: &ParserContext, input: &mut Parser)
                  -> Result<SpecifiedValue, ()> {
         HorizontalPosition::parse(context, input)
     }
 </%helpers:vector_longhand>
 
-<%helpers:vector_longhand name="background-position-y" animatable="True"
+<%helpers:vector_longhand name="background-position-y" animation_type="normal"
                           spec="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y"
                           delegate_animate="True">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::specified::position::VerticalPosition;
 
     #[allow(missing_docs)]
@@ -187,17 +187,17 @@
     #[inline]
     #[allow(missing_docs)]
     pub fn parse(context: &ParserContext, input: &mut Parser)
                  -> Result<SpecifiedValue, ()> {
         VerticalPosition::parse(context, input)
     }
 </%helpers:vector_longhand>
 
-<%helpers:vector_longhand name="background-repeat" animatable="False"
+<%helpers:vector_longhand name="background-repeat" animation_type="none"
                           spec="https://drafts.csswg.org/css-backgrounds/#the-background-repeat">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
 
     define_css_keyword_enum!(RepeatKeyword:
                              "repeat" => Repeat,
                              "space" => Space,
@@ -303,32 +303,32 @@
         }
     }
 </%helpers:vector_longhand>
 
 ${helpers.single_keyword("background-attachment",
                          "scroll fixed" + (" local" if product == "gecko" else ""),
                          vector=True,
                          spec="https://drafts.csswg.org/css-backgrounds/#the-background-attachment",
-                         animatable=False)}
+                         animation_type="none")}
 
 ${helpers.single_keyword("background-clip",
                          "border-box padding-box content-box",
                          extra_gecko_values="text",
                          vector=True, extra_prefixes="webkit",
                          spec="https://drafts.csswg.org/css-backgrounds/#the-background-clip",
-                         animatable=False)}
+                         animation_type="none")}
 
 ${helpers.single_keyword("background-origin",
                          "padding-box border-box content-box",
                          vector=True, extra_prefixes="webkit",
                          spec="https://drafts.csswg.org/css-backgrounds/#the-background-origin",
-                         animatable=False)}
+                         animation_type="none")}
 
-<%helpers:vector_longhand name="background-size" animatable="True" extra_prefixes="webkit"
+<%helpers:vector_longhand name="background-size" animation_type="normal" extra_prefixes="webkit"
                           spec="https://drafts.csswg.org/css-backgrounds/#the-background-size">
     use cssparser::Token;
     use std::ascii::AsciiExt;
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
 
     #[allow(missing_docs)]
@@ -507,10 +507,10 @@
     }
 </%helpers:vector_longhand>
 
 // https://drafts.fxtf.org/compositing/#background-blend-mode
 ${helpers.single_keyword("background-blend-mode",
                          """normal multiply screen overlay darken lighten color-dodge
                             color-burn hard-light soft-light difference exclusion hue
                             saturation color luminosity""",
-                         vector=True, products="gecko", animatable=False,
+                         vector=True, products="gecko", animation_type="none",
                          spec="https://drafts.fxtf.org/compositing/#background-blend-mode")}
--- a/servo/components/style/properties/longhand/border.mako.rs
+++ b/servo/components/style/properties/longhand/border.mako.rs
@@ -15,33 +15,33 @@
         else:
             return "https://drafts.csswg.org/css-backgrounds/#border-%s-%s" % (side[0], kind)
 %>
 % for side in ALL_SIDES:
     ${helpers.predefined_type("border-%s-color" % side[0], "CSSColor",
                               "::cssparser::Color::CurrentColor",
                               alias=maybe_moz_logical_alias(product, side, "-moz-border-%s-color"),
                               spec=maybe_logical_spec(side, "color"),
-                              animatable=True, logical = side[1])}
+                              animation_type="normal", logical = side[1])}
 % endfor
 
 % for side in ALL_SIDES:
     ${helpers.predefined_type("border-%s-style" % side[0], "BorderStyle",
                               "specified::BorderStyle::none",
                               need_clone=True,
                               alias=maybe_moz_logical_alias(product, side, "-moz-border-%s-style"),
                               spec=maybe_logical_spec(side, "style"),
-                              animatable=False, logical = side[1])}
+                              animation_type="none", logical = side[1])}
 % endfor
 
 ${helpers.gecko_keyword_conversion(Keyword('border-style',
                                    "none solid double dotted dashed hidden groove ridge inset outset"),
                                    type="::values::specified::BorderStyle")}
 % for side in ALL_SIDES:
-    <%helpers:longhand name="border-${side[0]}-width" boxed="True" animatable="True" logical="${side[1]}"
+    <%helpers:longhand name="border-${side[0]}-width" boxed="True" animation_type="normal" logical="${side[1]}"
                        alias="${maybe_moz_logical_alias(product, side, '-moz-border-%s-width')}"
                        spec="${maybe_logical_spec(side, 'width')}">
         use app_units::Au;
         use std::fmt;
         use style_traits::ToCss;
         use values::HasViewportPercentage;
         use values::specified::BorderWidth;
 
@@ -65,34 +65,34 @@
 
 // FIXME(#4126): when gfx supports painting it, make this Size2D<LengthOrPercentage>
 % for corner in ["top-left", "top-right", "bottom-right", "bottom-left"]:
     ${helpers.predefined_type("border-" + corner + "-radius", "BorderRadiusSize",
                               "computed::BorderRadiusSize::zero()",
                               "parse", extra_prefixes="webkit",
                               spec="https://drafts.csswg.org/css-backgrounds/#border-%s-radius" % corner,
                               boxed=True,
-                              animatable=True)}
+                              animation_type="normal")}
 % endfor
 
 ${helpers.single_keyword("box-decoration-break", "slice clone",
                          gecko_enum_prefix="StyleBoxDecorationBreak",
                          gecko_inexhaustive=True,
                          spec="https://drafts.csswg.org/css-break/#propdef-box-decoration-break",
-                         products="gecko", animatable=False)}
+                         products="gecko", animation_type="none")}
 
 ${helpers.single_keyword("-moz-float-edge", "content-box margin-box",
                          gecko_ffi_name="mFloatEdge",
                          gecko_enum_prefix="StyleFloatEdge",
                          gecko_inexhaustive=True,
                          products="gecko",
                          spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-float-edge)",
-                         animatable=False)}
+                         animation_type="none")}
 
-<%helpers:longhand name="border-image-source" animatable="False" boxed="True"
+<%helpers:longhand name="border-image-source" animation_type="none" boxed="True"
                    spec="https://drafts.csswg.org/css-backgrounds/#border-image-source">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::specified::Image;
 
     no_viewport_percentage!(SpecifiedValue);
 
@@ -158,17 +158,17 @@
         if input.try(|input| input.expect_ident_matching("none")).is_ok() {
             return Ok(SpecifiedValue(None));
         }
 
         Ok(SpecifiedValue(Some(try!(Image::parse(context, input)))))
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="border-image-outset" animatable="False"
+<%helpers:longhand name="border-image-outset" animation_type="none"
                    spec="https://drafts.csswg.org/css-backgrounds/#border-image-outset">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::specified::{LengthOrNumber, Number};
 
     impl HasViewportPercentage for SpecifiedValue {
         fn has_viewport_percentage(&self) -> bool {
@@ -274,17 +274,17 @@
         if values.len() > 0 {
             Ok(SpecifiedValue(values))
         } else {
             Err(())
         }
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="border-image-repeat" animatable="False"
+<%helpers:longhand name="border-image-repeat" animation_type="none"
                    spec="https://drafts.csswg.org/css-backgrounds/#border-image-repeat">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
 
     no_viewport_percentage!(SpecifiedValue);
 
     pub mod computed_value {
@@ -352,17 +352,17 @@
     pub fn parse(_context: &ParserContext, input: &mut Parser) -> Result<SpecifiedValue, ()> {
         let first = try!(RepeatKeyword::parse(input));
         let second = input.try(RepeatKeyword::parse).ok();
 
         Ok(SpecifiedValue(first, second))
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="border-image-width" animatable="False"
+<%helpers:longhand name="border-image-width" animation_type="none"
                    spec="https://drafts.csswg.org/css-backgrounds/#border-image-width">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::specified::{LengthOrPercentage, Number};
 
     impl HasViewportPercentage for SpecifiedValue {
         fn has_viewport_percentage(&self) -> bool {
@@ -552,17 +552,17 @@
         if values.len() > 0 {
             Ok(SpecifiedValue(values))
         } else {
             Err(())
         }
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="border-image-slice" boxed="True" animatable="False"
+<%helpers:longhand name="border-image-slice" boxed="True" animation_type="none"
                    spec="https://drafts.csswg.org/css-backgrounds/#border-image-slice">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::computed::NumberOrPercentage as ComputedNumberOrPercentage;
     use values::specified::{NumberOrPercentage, Percentage};
 
     no_viewport_percentage!(SpecifiedValue);
--- a/servo/components/style/properties/longhand/box.mako.rs
+++ b/servo/components/style/properties/longhand/box.mako.rs
@@ -7,17 +7,17 @@
 
 <% data.new_style_struct("Box",
                          inherited=False,
                          gecko_name="Display") %>
 
 // TODO(SimonSapin): don't parse `inline-table`, since we don't support it
 <%helpers:longhand name="display"
                    need_clone="True"
-                   animatable="False"
+                   animation_type="none"
                    custom_cascade="${product == 'servo'}"
                    spec="https://drafts.csswg.org/css-display/#propdef-display">
     <%
         values = """inline block inline-block
             table inline-table table-row-group table-header-group table-footer-group
             table-row table-column-group table-column table-cell table-caption
             list-item flex inline-flex
             none
@@ -95,33 +95,33 @@
     ${helpers.gecko_keyword_conversion(Keyword('display', ' '.join(values),
                                                gecko_enum_prefix='StyleDisplay'))}
 
 </%helpers:longhand>
 
 ${helpers.single_keyword("-moz-top-layer", "none top",
                          gecko_constant_prefix="NS_STYLE_TOP_LAYER",
                          gecko_ffi_name="mTopLayer", need_clone=True,
-                         products="gecko", animatable=False, internal=True,
+                         products="gecko", animation_type="none", internal=True,
                          spec="Internal (not web-exposed)")}
 
 ${helpers.single_keyword("position", "static absolute relative fixed",
                          need_clone="True",
                          extra_gecko_values="sticky",
-                         animatable="False",
+                         animation_type="none",
                          creates_stacking_context="True",
                          abspos_cb="True",
                          spec="https://drafts.csswg.org/css-position/#position-property")}
 
 <%helpers:single_keyword_computed name="float"
                                   values="none left right"
                                   // https://drafts.csswg.org/css-logical-props/#float-clear
                                   extra_specified="inline-start inline-end"
                                   needs_conversion="True"
-                                  animatable="False"
+                                  animation_type="none"
                                   need_clone="True"
                                   gecko_enum_prefix="StyleFloat"
                                   gecko_inexhaustive="True"
                                   gecko_ffi_name="mFloat"
                                   spec="https://drafts.csswg.org/css-box/#propdef-float">
     use values::HasViewportPercentage;
     no_viewport_percentage!(SpecifiedValue);
     impl ToComputedValue for SpecifiedValue {
@@ -152,17 +152,17 @@
     }
 </%helpers:single_keyword_computed>
 
 <%helpers:single_keyword_computed name="clear"
                                   values="none left right both"
                                   // https://drafts.csswg.org/css-logical-props/#float-clear
                                   extra_specified="inline-start inline-end"
                                   needs_conversion="True"
-                                  animatable="False"
+                                  animation_type="none"
                                   gecko_enum_prefix="StyleClear"
                                   gecko_ffi_name="mBreakType"
                                   spec="https://www.w3.org/TR/CSS2/visuren.html#flow-control">
     use values::HasViewportPercentage;
     no_viewport_percentage!(SpecifiedValue);
     impl ToComputedValue for SpecifiedValue {
         type ComputedValue = computed_value::T;
 
@@ -187,17 +187,17 @@
                     computed_value::T::${value} => SpecifiedValue::${value},
                 % endfor
             }
         }
     }
 </%helpers:single_keyword_computed>
 
 <%helpers:longhand name="-servo-display-for-hypothetical-box"
-                   animatable="False"
+                   animation_type="none"
                    derived_from="display"
                    products="servo"
                    spec="Internal (not web-exposed)">
     pub use super::display::{SpecifiedValue, get_initial_value};
     pub use super::display::{parse};
 
     pub mod computed_value {
         pub type T = super::SpecifiedValue;
@@ -206,17 +206,17 @@
     #[inline]
     pub fn derive_from_display(context: &mut Context) {
         let d = context.style().get_box().clone_display();
         context.mutate_style().mutate_box().set__servo_display_for_hypothetical_box(d);
     }
 
 </%helpers:longhand>
 
-<%helpers:longhand name="vertical-align" animatable="True"
+<%helpers:longhand name="vertical-align" animation_type="normal"
                    spec="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
 
     <% vertical_align = data.longhands_by_name["vertical-align"] %>
     <% vertical_align.keyword = Keyword("vertical-align",
                                         "baseline sub super top text-top middle bottom text-bottom",
@@ -337,33 +337,33 @@
         }
     }
 </%helpers:longhand>
 
 
 // CSS 2.1, Section 11 - Visual effects
 
 ${helpers.single_keyword("-servo-overflow-clip-box", "padding-box content-box",
-    products="servo", animatable=False, internal=True,
+    products="servo", animation_type="none", internal=True,
     spec="Internal, not web-exposed, \
           may be standardized in the future (https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-box)")}
 
 ${helpers.single_keyword("overflow-clip-box", "padding-box content-box",
-    products="gecko", animatable=False, internal=True,
+    products="gecko", animation_type="none", internal=True,
     spec="Internal, not web-exposed, \
           may be standardized in the future (https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-box)")}
 
 // FIXME(pcwalton, #2742): Implement scrolling for `scroll` and `auto`.
 ${helpers.single_keyword("overflow-x", "visible hidden scroll auto",
-                         need_clone=True, animatable=False,
+                         need_clone=True, animation_type="none",
                          gecko_constant_prefix="NS_STYLE_OVERFLOW",
                          spec="https://drafts.csswg.org/css-overflow/#propdef-overflow-x")}
 
 // FIXME(pcwalton, #2742): Implement scrolling for `scroll` and `auto`.
-<%helpers:longhand name="overflow-y" need_clone="True" animatable="False"
+<%helpers:longhand name="overflow-y" need_clone="True" animation_type="none"
                    spec="https://drafts.csswg.org/css-overflow/#propdef-overflow-y">
     use super::overflow_x;
 
     use std::fmt;
     use style_traits::ToCss;
     use values::computed::ComputedValueAsSpecified;
     use values::HasViewportPercentage;
 
@@ -400,17 +400,17 @@
     #[allow(missing_docs)]
     pub fn parse(context: &ParserContext, input: &mut Parser) -> Result<SpecifiedValue,()> {
         overflow_x::parse(context, input).map(SpecifiedValue)
     }
 </%helpers:longhand>
 
 <%helpers:vector_longhand name="transition-duration"
                           need_index="True"
-                          animatable="False"
+                          animation_type="none"
                           extra_prefixes="moz webkit"
                           spec="https://drafts.csswg.org/css-transitions/#propdef-transition-duration">
     use values::specified::Time;
 
     pub use values::specified::Time as SpecifiedValue;
     use values::HasViewportPercentage;
     no_viewport_percentage!(SpecifiedValue);
 
@@ -431,17 +431,17 @@
     pub fn parse(context: &ParserContext, input: &mut Parser) -> Result<SpecifiedValue,()> {
         Time::parse(context, input)
     }
 </%helpers:vector_longhand>
 
 // TODO(pcwalton): Lots more timing functions.
 <%helpers:vector_longhand name="transition-timing-function"
                           need_index="True"
-                          animatable="False"
+                          animation_type="none"
                           extra_prefixes="moz webkit"
                           spec="https://drafts.csswg.org/css-transitions/#propdef-transition-timing-function">
     use self::computed_value::StartEnd;
     use values::specified::Number;
     use euclid::point::{Point2D, TypedPoint2D};
     use std::fmt;
     use std::marker::PhantomData;
     use style_traits::ToCss;
@@ -723,17 +723,17 @@
     pub fn parse(context: &ParserContext, input: &mut Parser) -> Result<SpecifiedValue,()> {
         SpecifiedValue::parse(context, input)
     }
 </%helpers:vector_longhand>
 
 <%helpers:vector_longhand name="transition-property"
                           allow_empty="True"
                           need_index="True"
-                          animatable="False"
+                          animation_type="none"
                           extra_prefixes="moz webkit"
                           spec="https://drafts.csswg.org/css-transitions/#propdef-transition-property">
 
     use values::computed::ComputedValueAsSpecified;
 
     pub use properties::animated_properties::TransitionProperty;
     pub use properties::animated_properties::TransitionProperty as SpecifiedValue;
 
@@ -752,28 +752,28 @@
     use values::HasViewportPercentage;
     no_viewport_percentage!(SpecifiedValue);
 
     impl ComputedValueAsSpecified for SpecifiedValue { }
 </%helpers:vector_longhand>
 
 <%helpers:vector_longhand name="transition-delay"
                           need_index="True"
-                          animatable="False"
+                          animation_type="none"
                           extra_prefixes="moz webkit"
                           spec="https://drafts.csswg.org/css-transitions/#propdef-transition-delay">
     pub use properties::longhands::transition_duration::single_value::SpecifiedValue;
     pub use properties::longhands::transition_duration::single_value::computed_value;
     pub use properties::longhands::transition_duration::single_value::{get_initial_value, get_initial_specified_value};
     pub use properties::longhands::transition_duration::single_value::parse;
 </%helpers:vector_longhand>
 
 <%helpers:vector_longhand name="animation-name"
                           need_index="True"
-                          animatable="False",
+                          animation_type="none",
                           extra_prefixes="moz webkit"
                           allowed_in_keyframe_block="False"
                           spec="https://drafts.csswg.org/css-animations/#propdef-animation-name">
     use Atom;
     use std::fmt;
     use std::ops::Deref;
     use style_traits::ToCss;
     use values::computed::ComputedValueAsSpecified;
@@ -834,42 +834,42 @@
         SpecifiedValue::parse(context, input)
     }
 
     impl ComputedValueAsSpecified for SpecifiedValue {}
 </%helpers:vector_longhand>
 
 <%helpers:vector_longhand name="animation-duration"
                           need_index="True"
-                          animatable="False",
+                          animation_type="none",
                           extra_prefixes="moz webkit"
                           spec="https://drafts.csswg.org/css-animations/#propdef-animation-duration",
                           allowed_in_keyframe_block="False">
     pub use properties::longhands::transition_duration::single_value::computed_value;
     pub use properties::longhands::transition_duration::single_value::get_initial_specified_value;
     pub use properties::longhands::transition_duration::single_value::{get_initial_value, parse};
     pub use properties::longhands::transition_duration::single_value::SpecifiedValue;
 </%helpers:vector_longhand>
 
 <%helpers:vector_longhand name="animation-timing-function"
                           need_index="True"
-                          animatable="False",
+                          animation_type="none",
                           extra_prefixes="moz webkit"
                           spec="https://drafts.csswg.org/css-animations/#propdef-animation-timing-function",
                           allowed_in_keyframe_block="True">
     pub use properties::longhands::transition_timing_function::single_value::computed_value;
     pub use properties::longhands::transition_timing_function::single_value::get_initial_value;
     pub use properties::longhands::transition_timing_function::single_value::get_initial_specified_value;
     pub use properties::longhands::transition_timing_function::single_value::parse;
     pub use properties::longhands::transition_timing_function::single_value::SpecifiedValue;
 </%helpers:vector_longhand>
 
 <%helpers:vector_longhand name="animation-iteration-count"
                           need_index="True"
-                          animatable="False",
+                          animation_type="none",
                           extra_prefixes="moz webkit"
                           spec="https://drafts.csswg.org/css-animations/#propdef-animation-iteration-count",
                           allowed_in_keyframe_block="False">
     use std::fmt;
     use style_traits::ToCss;
     use values::computed::ComputedValueAsSpecified;
     use values::HasViewportPercentage;
 
@@ -928,59 +928,59 @@
 
     impl ComputedValueAsSpecified for SpecifiedValue {}
 </%helpers:vector_longhand>
 
 <% animation_direction_custom_consts = { "alternate-reverse": "Alternate_reverse" } %>
 ${helpers.single_keyword("animation-direction",
                          "normal reverse alternate alternate-reverse",
                          need_index=True,
-                         animatable=False,
+                         animation_type="none",
                          vector=True,
                          gecko_enum_prefix="PlaybackDirection",
                          custom_consts=animation_direction_custom_consts,
                          extra_prefixes="moz webkit",
                          spec="https://drafts.csswg.org/css-animations/#propdef-animation-direction",
                          allowed_in_keyframe_block=False)}
 
 // animation-play-state is the exception to the rule for allowed_in_keyframe_block:
 // https://drafts.csswg.org/css-animations/#keyframes
 ${helpers.single_keyword("animation-play-state",
                          "running paused",
                          need_clone=True,
                          need_index=True,
-                         animatable=False,
+                         animation_type="none",
                          vector=True,
                          extra_prefixes="moz webkit",
                          spec="https://drafts.csswg.org/css-animations/#propdef-animation-play-state",
                          allowed_in_keyframe_block=True)}
 
 ${helpers.single_keyword("animation-fill-mode",
                          "none forwards backwards both",
                          need_index=True,
-                         animatable=False,
+                         animation_type="none",
                          vector=True,
                          gecko_enum_prefix="FillMode",
                          extra_prefixes="moz webkit",
                          spec="https://drafts.csswg.org/css-animations/#propdef-animation-fill-mode",
                          allowed_in_keyframe_block=False)}
 
 <%helpers:vector_longhand name="animation-delay"
                           need_index="True"
-                          animatable="False",
+                          animation_type="none",
                           extra_prefixes="moz webkit",
                           spec="https://drafts.csswg.org/css-animations/#propdef-animation-delay",
                           allowed_in_keyframe_block="False">
     pub use properties::longhands::transition_duration::single_value::computed_value;
     pub use properties::longhands::transition_duration::single_value::get_initial_specified_value;
     pub use properties::longhands::transition_duration::single_value::{get_initial_value, parse};
     pub use properties::longhands::transition_duration::single_value::SpecifiedValue;
 </%helpers:vector_longhand>
 
-<%helpers:longhand products="gecko" name="scroll-snap-points-y" animatable="False"
+<%helpers:longhand products="gecko" name="scroll-snap-points-y" animation_type="none"
                    spec="Nonstandard (https://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/#scroll-snap-points)">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::specified::LengthOrPercentage;
 
     impl HasViewportPercentage for SpecifiedValue {
         fn has_viewport_percentage(&self) -> bool {
@@ -1065,47 +1065,47 @@
                 LengthOrPercentage::parse_non_negative(input).map(SpecifiedValue::Repeat)
             })
         } else {
             Err(())
         }
     }
 </%helpers:longhand>
 
-<%helpers:longhand products="gecko" name="scroll-snap-points-x" animatable="False"
+<%helpers:longhand products="gecko" name="scroll-snap-points-x" animation_type="none"
                    spec="Nonstandard (https://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/#scroll-snap-points)">
     pub use super::scroll_snap_points_y::SpecifiedValue;
     pub use super::scroll_snap_points_y::computed_value;
     pub use super::scroll_snap_points_y::get_initial_value;
     pub use super::scroll_snap_points_y::parse;
 </%helpers:longhand>
 
 
 ${helpers.predefined_type("scroll-snap-destination",
                           "Position",
                           "computed::Position::zero()",
                           products="gecko",
                           boxed="True",
                           spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-destination)",
-                          animatable=True)}
+                          animation_type="normal")}
 
 ${helpers.predefined_type("scroll-snap-coordinate",
                           "Position",
                           "computed::Position::zero()",
                           vector=True,
                           products="gecko",
                           spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-destination)",
-                          animatable=True,
+                          animation_type="normal",
                           allow_empty=True,
                           delegate_animate=True)}
 
 
 
 <%helpers:longhand name="transform" products="gecko servo" extra_prefixes="webkit"
-                   animatable="True"
+                   animation_type="normal"
                    creates_stacking_context="True"
                    fixpos_cb="True"
                    spec="https://drafts.csswg.org/css-transforms/#propdef-transform">
     use app_units::Au;
     use values::specified::{Angle, Length, LengthOrPercentage, Number};
     use style_traits::ToCss;
     use style_traits::values::Css;
     use values::CSSFloat;
@@ -1784,85 +1784,85 @@
 </%helpers:longhand>
 
 // CSSOM View Module
 // https://www.w3.org/TR/cssom-view-1/
 ${helpers.single_keyword("scroll-behavior",
                          "auto smooth",
                          products="gecko",
                          spec="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior",
-                         animatable=False)}
+                         animation_type="none")}
 
 ${helpers.single_keyword("scroll-snap-type-x",
                          "none mandatory proximity",
                          products="gecko",
                          gecko_constant_prefix="NS_STYLE_SCROLL_SNAP_TYPE",
                          spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type-x)",
-                         animatable=False)}
+                         animation_type="none")}
 
-<%helpers:longhand products="gecko" name="scroll-snap-type-y" animatable="False"
+<%helpers:longhand products="gecko" name="scroll-snap-type-y" animation_type="none"
                    spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type-x)">
     pub use super::scroll_snap_type_x::SpecifiedValue;
     pub use super::scroll_snap_type_x::computed_value;
     pub use super::scroll_snap_type_x::get_initial_value;
     pub use super::scroll_snap_type_x::parse;
 </%helpers:longhand>
 
 // Compositing and Blending Level 1
 // http://www.w3.org/TR/compositing-1/
 ${helpers.single_keyword("isolation",
                          "auto isolate",
                          products="gecko",
                          spec="https://drafts.fxtf.org/compositing/#isolation",
                          creates_stacking_context=True,
-                         animatable=False)}
+                         animation_type="none")}
 
 // TODO add support for logical values recto and verso
 ${helpers.single_keyword("page-break-after",
                          "auto always avoid left right",
                          products="gecko",
                          spec="https://drafts.csswg.org/css2/page.html#propdef-page-break-after",
-                         animatable=False)}
+                         animation_type="none")}
 ${helpers.single_keyword("page-break-before",
                          "auto always avoid left right",
                          products="gecko",
                          spec="https://drafts.csswg.org/css2/page.html#propdef-page-break-before",
-                         animatable=False)}
+                         animation_type="none")}
 ${helpers.single_keyword("page-break-inside",
                          "auto avoid",
                          products="gecko",
                          gecko_ffi_name="mBreakInside",
                          gecko_constant_prefix="NS_STYLE_PAGE_BREAK",
                          spec="https://drafts.csswg.org/css2/page.html#propdef-page-break-inside",
-                         animatable=False)}
+                         animation_type="none")}
 
 // CSS Basic User Interface Module Level 3
 // http://dev.w3.org/csswg/css-ui
 // FIXME support logical values `block` and `inline` (https://drafts.csswg.org/css-logical-props/#resize)
 ${helpers.single_keyword("resize",
                          "none both horizontal vertical",
                          products="gecko",
                          spec="https://drafts.csswg.org/css-ui/#propdef-resize",
-                         animatable=False)}
+                         animation_type="none")}
 
 
 ${helpers.predefined_type("perspective",
                           "LengthOrNone",
                           "Either::Second(None_)",
                           "parse_non_negative_length",
                           gecko_ffi_name="mChildPerspective",
                           spec="https://drafts.csswg.org/css-transforms/#perspective",
                           extra_prefixes="moz webkit",
                           boxed=True,
                           creates_stacking_context=True,
                           fixpos_cb=True,
-                          animatable=True)}
+                          animation_type="normal")}
 
 // FIXME: This prop should be animatable
-<%helpers:longhand name="perspective-origin" boxed="True" animatable="False" extra_prefixes="moz webkit"
+<%helpers:longhand name="perspective-origin" boxed="True" animation_type="none" extra_prefixes="moz webkit"
                    spec="https://drafts.csswg.org/css-transforms/#perspective-origin-property">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::specified::{LengthOrPercentage, Percentage};
 
     pub mod computed_value {
         use values::computed::LengthOrPercentage;
@@ -1943,36 +1943,36 @@
         }
     }
 </%helpers:longhand>
 
 ${helpers.single_keyword("backface-visibility",
                          "visible hidden",
                          spec="https://drafts.csswg.org/css-transforms/#backface-visibility-property",
                          extra_prefixes="moz webkit",
-                         animatable=False)}
+                         animation_type="none")}
 
 ${helpers.single_keyword("transform-box",
                          "border-box fill-box view-box",
                          gecko_enum_prefix="StyleGeometryBox",
                          products="gecko",
                          spec="https://drafts.csswg.org/css-transforms/#transform-box",
-                         animatable=False)}
+                         animation_type="none")}
 
 // `auto` keyword is not supported in gecko yet.
 ${helpers.single_keyword("transform-style",
                          "auto flat preserve-3d" if product == "servo" else
                          "flat preserve-3d",
                          spec="https://drafts.csswg.org/css-transforms/#transform-style-property",
                          extra_prefixes="moz webkit",
                          creates_stacking_context=True,
                          fixpos_cb=True,
-                         animatable=False)}
+                         animation_type="none")}
 
-<%helpers:longhand name="transform-origin" animatable="True" extra_prefixes="moz webkit" boxed="True"
+<%helpers:longhand name="transform-origin" animation_type="normal" extra_prefixes="moz webkit" boxed="True"
                    spec="https://drafts.csswg.org/css-transforms/#transform-origin-property">
     use app_units::Au;
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::specified::{NoCalcLength, LengthOrPercentage, Percentage};
 
     pub mod computed_value {
@@ -2070,17 +2070,17 @@
                 horizontal: ToComputedValue::from_computed_value(&computed.horizontal),
                 vertical: ToComputedValue::from_computed_value(&computed.vertical),
                 depth: ToComputedValue::from_computed_value(&computed.depth),
             }
         }
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="contain" animatable="False" products="none"
+<%helpers:longhand name="contain" animation_type="none" products="none"
                    spec="https://drafts.csswg.org/css-contain/#contain-property">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::computed::ComputedValueAsSpecified;
 
     impl ComputedValueAsSpecified for SpecifiedValue {}
     no_viewport_percentage!(SpecifiedValue);
@@ -2180,17 +2180,17 @@
 
 ${helpers.single_keyword("appearance",
                          "auto none",
                          gecko_ffi_name="mAppearance",
                          gecko_constant_prefix="NS_THEME",
                          products="gecko",
                          spec="https://drafts.csswg.org/css-ui-4/#appearance-switching",
                          alias="-webkit-appearance",
-                         animatable=False)}
+                         animation_type="none")}
 
 // Non-standard
 ${helpers.single_keyword("-moz-appearance",
                          """none button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up
                             button-bevel button-focus caret checkbox checkbox-container checkbox-label checkmenuitem
                             dualbutton groupbox listbox listitem menuarrow menubar menucheckbox menuimage menuitem
                             menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio
                             menuseparator meterbar meterchunk number-input progressbar progressbar-vertical
@@ -2210,34 +2210,34 @@
                             -moz-window-button-maximize -moz-window-button-minimize -moz-window-button-restore
                             -moz-window-frame-bottom -moz-window-frame-left -moz-window-frame-right -moz-window-titlebar
                             -moz-window-titlebar-maximized
                          """,
                          gecko_ffi_name="mMozAppearance",
                          gecko_constant_prefix="NS_THEME",
                          products="gecko",
                          spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance)",
-                         animatable=False)}
+                         animation_type="none")}
 
 ${helpers.predefined_type("-moz-binding", "UrlOrNone", "Either::Second(None_)",
                           products="gecko",
-                          animatable="False",
+                          animation_type="none",
                           gecko_ffi_name="mBinding",
                           spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-binding)",
                           disable_when_testing="True")}
 
 ${helpers.single_keyword("-moz-orient",
                           "inline block horizontal vertical",
                           products="gecko",
                           gecko_ffi_name="mOrient",
                           gecko_enum_prefix="StyleOrient",
                           spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-orient)",
-                          animatable=False)}
+                          animation_type="none")}
 
-<%helpers:longhand name="will-change" products="gecko" animatable="False"
+<%helpers:longhand name="will-change" products="gecko" animation_type="none"
                    spec="https://drafts.csswg.org/css-will-change/#will-change">
     use cssparser::serialize_identifier;
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::computed::ComputedValueAsSpecified;
 
     impl ComputedValueAsSpecified for SpecifiedValue {}
--- a/servo/components/style/properties/longhand/color.mako.rs
+++ b/servo/components/style/properties/longhand/color.mako.rs
@@ -3,17 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <% data.new_style_struct("Color", inherited=True) %>
 
 <% from data import to_rust_ident %>
 
-<%helpers:longhand name="color" need_clone="True" animatable="True"
+<%helpers:longhand name="color" need_clone="True" animation_type="normal"
                    spec="https://drafts.csswg.org/css-color/#color">
     use cssparser::RGBA;
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::specified::{Color, CSSColor, CSSRGBA};
 
     impl ToComputedValue for SpecifiedValue {
--- a/servo/components/style/properties/longhand/column.mako.rs
+++ b/servo/components/style/properties/longhand/column.mako.rs
@@ -9,48 +9,48 @@
 // FIXME: This prop should be animatable.
 ${helpers.predefined_type("column-width",
                           "length::LengthOrAuto",
                           "Either::Second(Auto)",
                           initial_specified_value="Either::Second(Auto)",
                           parse_method="parse_non_negative_length",
                           extra_prefixes="moz",
                           boxed=True,
-                          animatable=False,
+                          animation_type="none",
                           experimental=True,
                           spec="https://drafts.csswg.org/css-multicol/#propdef-column-width")}
 
 
 // FIXME: This prop should be animatable.
 ${helpers.predefined_type("column-count", "IntegerOrAuto",
                           "Either::Second(Auto)",
                           parse_method="parse_positive",
                           initial_specified_value="Either::Second(Auto)",
                           experimental="True",
-                          animatable="False",
+                          animation_type="none",
                           extra_prefixes="moz",
                           spec="https://drafts.csswg.org/css-multicol/#propdef-column-count")}
 
 // FIXME: This prop should be animatable.
 ${helpers.predefined_type("column-gap",
                           "length::LengthOrNormal",
                           "Either::Second(Normal)",
                           parse_method='parse_non_negative_length',
                           extra_prefixes="moz",
                           experimental=True,
                           boxed=True,
-                          animatable=False,
+                          animation_type="none",
                           spec="https://drafts.csswg.org/css-multicol/#propdef-column-gap")}
 
 ${helpers.single_keyword("column-fill", "balance auto", extra_prefixes="moz",
-                         products="gecko", animatable=False,
+                         products="gecko", animation_type="none",
                          spec="https://drafts.csswg.org/css-multicol/#propdef-column-fill")}
 
 // https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width
-<%helpers:longhand name="column-rule-width" products="gecko" boxed="True" animatable="True" extra_prefixes="moz"
+<%helpers:longhand name="column-rule-width" products="gecko" boxed="True" animation_type="normal" extra_prefixes="moz"
                    spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule-width">
     use app_units::Au;
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::specified::BorderWidth;
 
     pub mod computed_value {
@@ -74,23 +74,23 @@
         BorderWidth::parse(context, input)
     }
 </%helpers:longhand>
 
 // https://drafts.csswg.org/css-multicol-1/#crc
 ${helpers.predefined_type("column-rule-color", "CSSColor",
                           "::cssparser::Color::CurrentColor",
                           initial_specified_value="specified::CSSColor::currentcolor()",
-                          products="gecko", animatable=True, extra_prefixes="moz",
+                          products="gecko", animation_type="normal", extra_prefixes="moz",
                           complex_color=True, need_clone=True,
                           spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule-color")}
 
 // It's not implemented in servo or gecko yet.
 ${helpers.single_keyword("column-span", "none all",
-                         products="none", animatable=False,
+                         products="none", animation_type="none",
                          spec="https://drafts.csswg.org/css-multicol/#propdef-column-span")}
 
 ${helpers.single_keyword("column-rule-style",
                          "none hidden dotted dashed solid double groove ridge inset outset",
                          products="gecko", extra_prefixes="moz",
                          gecko_constant_prefix="NS_STYLE_BORDER_STYLE",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule-style")}
--- a/servo/components/style/properties/longhand/counters.mako.rs
+++ b/servo/components/style/properties/longhand/counters.mako.rs
@@ -1,17 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <% data.new_style_struct("Counters", inherited=False, gecko_name="Content") %>
 
-<%helpers:longhand name="content" boxed="True" animatable="False"
+<%helpers:longhand name="content" boxed="True" animation_type="none"
                    spec="https://drafts.csswg.org/css-content/#propdef-content">
     use cssparser::Token;
     use std::ascii::AsciiExt;
     use values::computed::ComputedValueAsSpecified;
     use values::specified::url::SpecifiedUrl;
     use values::HasViewportPercentage;
 
     use super::list_style_type;
@@ -235,17 +235,17 @@
         if !content.is_empty() {
             Ok(SpecifiedValue::Content(content))
         } else {
             Err(())
         }
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="counter-increment" animatable="False"
+<%helpers:longhand name="counter-increment" animation_type="none"
                    spec="https://drafts.csswg.org/css-lists/#propdef-counter-increment">
     use std::fmt;
     use style_traits::ToCss;
     use super::content;
     use values::HasViewportPercentage;
 
     use cssparser::{Token, serialize_identifier};
     use std::borrow::{Cow, ToOwned};
@@ -357,17 +357,17 @@
         if !counters.is_empty() {
             Ok(SpecifiedValue(counters))
         } else {
             Err(())
         }
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="counter-reset" animatable="False"
+<%helpers:longhand name="counter-reset" animation_type="none"
                    spec="https://drafts.csswg.org/css-lists-3/#propdef-counter-reset">
     pub use super::counter_increment::{SpecifiedValue, computed_value, get_initial_value};
     use super::counter_increment::parse_common;
 
     pub fn parse(_: &ParserContext, input: &mut Parser) -> Result<SpecifiedValue,()> {
         parse_common(0, input)
     }
 </%helpers:longhand>
--- a/servo/components/style/properties/longhand/effects.mako.rs
+++ b/servo/components/style/properties/longhand/effects.mako.rs
@@ -5,22 +5,22 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 // Box-shadow, etc.
 <% data.new_style_struct("Effects", inherited=False) %>
 
 ${helpers.predefined_type("opacity",
                           "Opacity",
                           "1.0",
-                          animatable=True,
+                          animation_type="normal",
                           creates_stacking_context=True,
                           spec="https://drafts.csswg.org/css-color/#opacity")}
 
 <%helpers:vector_longhand name="box-shadow" allow_empty="True"
-                          animatable="True" extra_prefixes="webkit"
+                          animation_type="normal" extra_prefixes="webkit"
                           spec="https://drafts.csswg.org/css-backgrounds/#box-shadow">
     use cssparser;
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
 
     pub type SpecifiedValue = specified::Shadow;
 
@@ -76,22 +76,22 @@
         specified::Shadow::parse(context, input, false)
     }
 </%helpers:vector_longhand>
 
 // FIXME: This prop should be animatable
 ${helpers.predefined_type("clip",
                           "ClipRectOrAuto",
                           "computed::ClipRectOrAuto::auto()",
-                          animatable=False,
+                          animation_type="none",
                           boxed="True",
                           spec="https://drafts.fxtf.org/css-masking/#clip-property")}
 
 // FIXME: This prop should be animatable
-<%helpers:longhand name="filter" animatable="False" extra_prefixes="webkit"
+<%helpers:longhand name="filter" animation_type="none" extra_prefixes="webkit"
                     creates_stacking_context="True"
                     fixpos_cb="True"
                    spec="https://drafts.fxtf.org/filters/#propdef-filter">
     //pub use self::computed_value::T as SpecifiedValue;
     use cssparser;
     use std::fmt;
     use style_traits::{self, ToCss};
     use values::{CSSFloat, HasViewportPercentage};
@@ -513,11 +513,11 @@ pub fn parse_origin(context: &ParserCont
         Err(())
     }
 }
 
 ${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",
-                         animatable=False,
+                         animation_type="none",
                          creates_stacking_context=True,
                          spec="https://drafts.fxtf.org/compositing/#propdef-mix-blend-mode")}
--- a/servo/components/style/properties/longhand/font.mako.rs
+++ b/servo/components/style/properties/longhand/font.mako.rs
@@ -2,17 +2,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 <% from data import Method %>
 
 <% data.new_style_struct("Font",
                          inherited=True) %>
-<%helpers:longhand name="font-family" animatable="False" need_index="True"
+<%helpers:longhand name="font-family" animation_type="none" need_index="True"
                    spec="https://drafts.csswg.org/css-fonts/#propdef-font-family">
     use self::computed_value::{FontFamily, FamilyName};
     use values::HasViewportPercentage;
     use values::computed::ComputedValueAsSpecified;
     pub use self::computed_value::T as SpecifiedValue;
 
     impl ComputedValueAsSpecified for SpecifiedValue {}
     no_viewport_percentage!(SpecifiedValue);
@@ -220,40 +220,40 @@
 </%helpers:longhand>
 
 
 ${helpers.single_keyword("font-style",
                          "normal italic oblique",
                          gecko_constant_prefix="NS_FONT_STYLE",
                          gecko_ffi_name="mFont.style",
                          spec="https://drafts.csswg.org/css-fonts/#propdef-font-style",
-                         animatable=False)}
+                         animation_type="none")}
 
 ${helpers.single_keyword("font-variant",
                          "normal small-caps",
                          spec="https://drafts.csswg.org/css-fonts/#propdef-font-variant",
-                         animatable=False)}
+                         animation_type="none")}
 
 
 <% font_variant_caps_custom_consts= { "small-caps": "SMALLCAPS",
                                       "all-small": "ALLSMALL",
                                       "petite-caps": "PETITECAPS",
                                       "all-petite": "ALLPETITE",
                                       "titling-caps": "TITLING" } %>
 
 ${helpers.single_keyword("font-variant-caps",
                          "normal small-caps all-small petite-caps unicase titling-caps",
                          gecko_constant_prefix="NS_FONT_VARIANT_CAPS",
                          gecko_ffi_name="mFont.variantCaps",
                          products="gecko",
                          spec="https://drafts.csswg.org/css-fonts/#propdef-font-variant-caps",
                          custom_consts=font_variant_caps_custom_consts,
-                         animatable=False)}
+                         animation_type="none")}
 
-<%helpers:longhand name="font-weight" need_clone="True" animatable="True"
+<%helpers:longhand name="font-weight" need_clone="True" animation_type="normal"
                    spec="https://drafts.csswg.org/css-fonts/#propdef-font-weight">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
 
     no_viewport_percentage!(SpecifiedValue);
 
     #[derive(Debug, Clone, PartialEq, Eq, Copy)]
@@ -404,17 +404,17 @@
                 % for weight in range(100, 901, 100):
                     computed_value::T::Weight${weight} => SpecifiedValue::Weight${weight},
                 % endfor
             }
         }
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="font-size" need_clone="True" animatable="True"
+<%helpers:longhand name="font-size" need_clone="True" animation_type="normal"
                    spec="https://drafts.csswg.org/css-fonts/#propdef-font-size">
     use app_units::Au;
     use std::fmt;
     use style_traits::ToCss;
     use values::{FONT_MEDIUM_PX, HasViewportPercentage};
     use values::specified::{LengthOrPercentage, Length, NoCalcLength, Percentage};
 
     impl ToCss for SpecifiedValue {
@@ -669,17 +669,17 @@
         match_ignore_ascii_case! {&*input.expect_ident()?,
             "smaller" => Ok(SpecifiedValue::Smaller),
             "larger" => Ok(SpecifiedValue::Larger),
             _ => Err(())
         }
     }
 </%helpers:longhand>
 
-<%helpers:longhand products="gecko" name="font-size-adjust" animatable="True"
+<%helpers:longhand products="gecko" name="font-size-adjust" animation_type="normal"
                    spec="https://drafts.csswg.org/css-fonts/#propdef-font-size-adjust">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
 
     no_viewport_percentage!(SpecifiedValue);
 
     #[derive(Copy, Clone, Debug, PartialEq)]
@@ -770,17 +770,17 @@
         if input.try(|input| input.expect_ident_matching("none")).is_ok() {
             return Ok(SpecifiedValue::None);
         }
 
         Ok(SpecifiedValue::Number(try!(Number::parse_non_negative(input))))
     }
 </%helpers:longhand>
 
-<%helpers:longhand products="gecko" name="font-synthesis" animatable="False"
+<%helpers:longhand products="gecko" name="font-synthesis" animation_type="none"
                    spec="https://drafts.csswg.org/css-fonts/#propdef-font-synthesis">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::computed::ComputedValueAsSpecified;
 
     impl ComputedValueAsSpecified for SpecifiedValue {}
     no_viewport_percentage!(SpecifiedValue);
@@ -842,35 +842,35 @@
 ${helpers.single_keyword("font-stretch",
                          "normal ultra-condensed extra-condensed condensed \
                           semi-condensed semi-expanded expanded extra-expanded \
                           ultra-expanded",
                          gecko_ffi_name="mFont.stretch",
                          gecko_constant_prefix="NS_FONT_STRETCH",
                          cast_type='i16',
                          spec="https://drafts.csswg.org/css-fonts/#propdef-font-stretch",
-                         animatable=False)}
+                         animation_type="none")}
 
 ${helpers.single_keyword("font-kerning",
                          "auto none normal",
                          products="gecko",
                          gecko_ffi_name="mFont.kerning",
                          gecko_constant_prefix="NS_FONT_KERNING",
                          spec="https://drafts.csswg.org/css-fonts/#propdef-font-stretch",
-                         animatable=False)}
+                         animation_type="none")}
 
 ${helpers.single_keyword("font-variant-position",
                          "normal sub super",
                          products="gecko",
                          gecko_ffi_name="mFont.variantPosition",
                          gecko_constant_prefix="NS_FONT_VARIANT_POSITION",
                          spec="https://drafts.csswg.org/css-fonts/#propdef-font-variant-position",
-                         animatable=False)}
+                         animation_type="none")}
 
-<%helpers:longhand name="font-feature-settings" products="none" animatable="False" extra_prefixes="moz"
+<%helpers:longhand name="font-feature-settings" products="none" animation_type="none" extra_prefixes="moz"
                    spec="https://drafts.csswg.org/css-fonts/#propdef-font-feature-settings">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::computed::ComputedValueAsSpecified;
     pub use self::computed_value::T as SpecifiedValue;
 
     impl ComputedValueAsSpecified for SpecifiedValue {}
@@ -970,17 +970,17 @@
             Ok(computed_value::T::Normal)
         } else {
             input.parse_comma_separated(|i| computed_value::FeatureTagValue::parse(context, i))
                  .map(computed_value::T::Tag)
         }
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="font-language-override" products="gecko" animatable="False" extra_prefixes="moz"
+<%helpers:longhand name="font-language-override" products="gecko" animation_type="none" extra_prefixes="moz"
                    spec="https://drafts.csswg.org/css-fonts-3/#propdef-font-language-override">
     use std::fmt;
     use style_traits::ToCss;
     use byteorder::{BigEndian, ByteOrder};
     use values::HasViewportPercentage;
     no_viewport_percentage!(SpecifiedValue);
 
     #[derive(Debug, Clone, PartialEq, Eq)]
@@ -1088,17 +1088,17 @@
         } else {
             input.expect_string().map(|cow| {
                 SpecifiedValue::Override(cow.into_owned())
             })
         }
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="-x-lang" products="gecko" animatable="False" internal="True"
+<%helpers:longhand name="-x-lang" products="gecko" animation_type="none" internal="True"
                    spec="Internal (not web-exposed)"
                    internal="True">
     use values::HasViewportPercentage;
     use values::computed::ComputedValueAsSpecified;
     pub use self::computed_value::T as SpecifiedValue;
 
     impl ComputedValueAsSpecified for SpecifiedValue {}
     no_viewport_percentage!(SpecifiedValue);
--- a/servo/components/style/properties/longhand/inherited_box.mako.rs
+++ b/servo/components/style/properties/longhand/inherited_box.mako.rs
@@ -6,38 +6,38 @@
 
 <% data.new_style_struct("InheritedBox", inherited=True, gecko_name="Visibility") %>
 
 // TODO: collapse. Well, do tables first.
 ${helpers.single_keyword("visibility",
                          "visible hidden",
                          extra_gecko_values="collapse",
                          gecko_ffi_name="mVisible",
-                         animatable=True,
+                         animation_type="normal",
                          spec="https://drafts.csswg.org/css-box/#propdef-visibility")}
 
 // CSS Writing Modes Level 3
 // https://drafts.csswg.org/css-writing-modes-3
 ${helpers.single_keyword("writing-mode",
                          "horizontal-tb vertical-rl vertical-lr",
                          experimental=True,
                          need_clone=True,
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.csswg.org/css-writing-modes/#propdef-writing-mode")}
 
-${helpers.single_keyword("direction", "ltr rtl", need_clone=True, animatable=False,
+${helpers.single_keyword("direction", "ltr rtl", need_clone=True, animation_type="none",
                          spec="https://drafts.csswg.org/css-writing-modes/#propdef-direction")}
 
 <%helpers:single_keyword_computed
     name="text-orientation"
     values="mixed upright sideways"
     extra_specified="sideways-right"
     products="gecko"
     need_clone="True"
-    animatable="False"
+    animation_type="none"
     spec="https://drafts.csswg.org/css-writing-modes/#propdef-text-orientation"
 >
     use values::HasViewportPercentage;
     no_viewport_percentage!(SpecifiedValue);
 
     impl ToComputedValue for SpecifiedValue {
         type ComputedValue = computed_value::T;
 
@@ -62,34 +62,34 @@
         }
     }
 </%helpers:single_keyword_computed>
 
 // CSS Color Module Level 4
 // https://drafts.csswg.org/css-color/
 ${helpers.single_keyword("color-adjust",
                          "economy exact", products="gecko",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.csswg.org/css-color/#propdef-color-adjust")}
 
 <% image_rendering_custom_consts = { "crisp-edges": "CRISPEDGES" } %>
 // According to to CSS-IMAGES-3, `optimizespeed` and `optimizequality` are synonyms for `auto`
 // And, firefox doesn't support `pixelated` yet (https://bugzilla.mozilla.org/show_bug.cgi?id=856337)
 ${helpers.single_keyword("image-rendering",
                          "auto crisp-edges",
                          extra_gecko_values="optimizespeed optimizequality",
                          extra_servo_values="pixelated",
                          custom_consts=image_rendering_custom_consts,
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.csswg.org/css-images/#propdef-image-rendering")}
 
 // Image Orientation
 <%helpers:longhand name="image-orientation"
                    products="None"
-                   animatable="False"
+                   animation_type="none"
     spec="https://drafts.csswg.org/css-images/#propdef-image-orientation, \
       /// additional values in https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation">
     use std::fmt;
     use style_traits::ToCss;
     use values::specified::Angle;
 
     use values::HasViewportPercentage;
     no_viewport_percentage!(SpecifiedValue);
@@ -218,17 +218,17 @@
     }
 </%helpers:longhand>
 
 // 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"
-                   animatable="False"
+                   animation_type="none"
                    spec="Nonstandard (internal layout use only)">
     use std::fmt;
     use style_traits::ToCss;
     use values::computed::ComputedValueAsSpecified;
     use values::HasViewportPercentage;
 
     no_viewport_percentage!(SpecifiedValue);
 
--- a/servo/components/style/properties/longhand/inherited_svg.mako.rs
+++ b/servo/components/style/properties/longhand/inherited_svg.mako.rs
@@ -12,135 +12,135 @@
 
 // TODO(emilio): Should some of these types be animatable?
 
 // Section 10 - Text
 
 ${helpers.single_keyword("text-anchor",
                          "start middle end",
                          products="gecko",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://www.w3.org/TR/SVG/text.html#TextAnchorProperty")}
 
 // Section 11 - Painting: Filling, Stroking and Marker Symbols
 ${helpers.single_keyword("color-interpolation",
                          "srgb auto linearrgb",
                          products="gecko",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://www.w3.org/TR/SVG11/painting.html#ColorInterpolationProperty")}
 
 ${helpers.single_keyword("color-interpolation-filters", "linearrgb auto srgb",
                          products="gecko",
                          gecko_constant_prefix="NS_STYLE_COLOR_INTERPOLATION",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://www.w3.org/TR/SVG11/painting.html#ColorInterpolationFiltersProperty")}
 
 ${helpers.predefined_type(
     "fill", "SVGPaint",
     "::values::computed::SVGPaint::black()",
     products="gecko",
-    animatable=False,
+    animation_type="none",
     boxed=True,
     spec="https://www.w3.org/TR/SVG2/painting.html#SpecifyingFillPaint")}
 
 ${helpers.predefined_type("fill-opacity", "Opacity", "1.0",
-                          products="gecko", animatable=False,
+                          products="gecko", animation_type="none",
                           spec="https://www.w3.org/TR/SVG11/painting.html#FillOpacityProperty")}
 
 ${helpers.single_keyword("fill-rule", "nonzero evenodd",
                          gecko_enum_prefix="StyleFillRule",
                          gecko_inexhaustive=True,
-                         products="gecko", animatable=False,
+                         products="gecko", animation_type="none",
                          spec="https://www.w3.org/TR/SVG11/painting.html#FillRuleProperty")}
 
 ${helpers.single_keyword("shape-rendering",
                          "auto optimizespeed crispedges geometricprecision",
                          products="gecko",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty")}
 
 ${helpers.predefined_type(
     "stroke", "SVGPaint",
     "Default::default()",
     products="gecko",
-    animatable=False,
+    animation_type="none",
     boxed=True,
     spec="https://www.w3.org/TR/SVG2/painting.html#SpecifyingStrokePaint")}
 
 ${helpers.predefined_type(
     "stroke-width", "LengthOrPercentage",
     "computed::LengthOrPercentage::one()",
     "parse_numbers_are_pixels_non_negative",
     products="gecko",
-    animatable=True,
+    animation_type="normal",
     needs_context=False,
     spec="https://www.w3.org/TR/SVG2/painting.html#StrokeWidth")}
 
 ${helpers.single_keyword("stroke-linecap", "butt round square",
-                         products="gecko", animatable=False,
+                         products="gecko", animation_type="none",
                          spec="https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty")}
 
 ${helpers.single_keyword("stroke-linejoin", "miter round bevel",
-                         products="gecko", animatable=False,
+                         products="gecko", animation_type="none",
                          spec="https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty")}
 
 ${helpers.predefined_type("stroke-miterlimit", "Number", "4.0",
                           "parse_at_least_one", products="gecko",
                           needs_context=False,
-                          animatable=False,
+                          animation_type="none",
                           spec="https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty")}
 
 ${helpers.predefined_type("stroke-opacity", "Opacity", "1.0",
-                          products="gecko", animatable=False,
+                          products="gecko", animation_type="none",
                           spec="https://www.w3.org/TR/SVG11/painting.html#StrokeOpacityProperty")}
 
 ${helpers.predefined_type("stroke-dasharray",
                           "LengthOrPercentageOrNumber",
                           "Either::Second(0.0)",
                           "parse_non_negative",
                           vector="True",
                           products="gecko",
-                          animatable="False",
+                          animation_type="none",
                           space_separated_allowed="True",
                           spec="https://www.w3.org/TR/SVG2/painting.html#StrokeDashing")}
 
 ${helpers.predefined_type(
     "stroke-dashoffset", "LengthOrPercentage",
     "computed::LengthOrPercentage::zero()",
     "parse_numbers_are_pixels",
     products="gecko",
-    animatable=True,
+    animation_type="normal",
     needs_context=False,
     spec="https://www.w3.org/TR/SVG2/painting.html#StrokeDashing")}
 
 // Section 14 - Clipping, Masking and Compositing
 ${helpers.single_keyword("clip-rule", "nonzero evenodd",
                          products="gecko",
                          gecko_enum_prefix="StyleFillRule",
                          gecko_inexhaustive=True,
-                         animatable=False,
+                         animation_type="none",
                          spec="https://www.w3.org/TR/SVG11/masking.html#ClipRuleProperty")}
 
 ${helpers.predefined_type("marker-start", "UrlOrNone", "Either::Second(None_)",
                           products="gecko",
-                          animatable="False",
+                          animation_type="none",
                           spec="https://www.w3.org/TR/SVG2/painting.html#VertexMarkerProperties")}
 
 ${helpers.predefined_type("marker-mid", "UrlOrNone", "Either::Second(None_)",
                           products="gecko",
-                          animatable="False",
+                          animation_type="none",
                           spec="https://www.w3.org/TR/SVG2/painting.html#VertexMarkerProperties")}
 
 ${helpers.predefined_type("marker-end", "UrlOrNone", "Either::Second(None_)",
                           products="gecko",
-                          animatable="False",
+                          animation_type="none",
                           spec="https://www.w3.org/TR/SVG2/painting.html#VertexMarkerProperties")}
 
 <%helpers:longhand name="paint-order"
-                   animatable="False"
+                   animation_type="none"
                    products="gecko"
                    spec="https://www.w3.org/TR/SVG2/painting.html#PaintOrder">
 
     use values::computed::ComputedValueAsSpecified;
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
 
--- a/servo/components/style/properties/longhand/inherited_table.mako.rs
+++ b/servo/components/style/properties/longhand/inherited_table.mako.rs
@@ -3,29 +3,29 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <% data.new_style_struct("InheritedTable", inherited=True, gecko_name="TableBorder") %>
 
 ${helpers.single_keyword("border-collapse", "separate collapse",
                          gecko_constant_prefix="NS_STYLE_BORDER",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.csswg.org/css-tables/#propdef-border-collapse")}
 ${helpers.single_keyword("empty-cells", "show hide",
                          gecko_constant_prefix="NS_STYLE_TABLE_EMPTY_CELLS",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.csswg.org/css-tables/#propdef-empty-cells")}
 ${helpers.single_keyword("caption-side", "top bottom",
                          extra_gecko_values="right left top-outside bottom-outside",
                          needs_conversion="True",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.csswg.org/css-tables/#propdef-caption-side")}
 
-<%helpers:longhand name="border-spacing" animatable="False" boxed="True"
+<%helpers:longhand name="border-spacing" animation_type="none" boxed="True"
                    spec="https://drafts.csswg.org/css-tables/#propdef-border-spacing">
     use app_units::Au;
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
 
     pub mod computed_value {
         use app_units::Au;
--- a/servo/components/style/properties/longhand/inherited_text.mako.rs
+++ b/servo/components/style/properties/longhand/inherited_text.mako.rs
@@ -1,17 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 <% from data import Keyword %>
 <% data.new_style_struct("InheritedText", inherited=True, gecko_name="Text") %>
 
-<%helpers:longhand name="line-height" animatable="True"
+<%helpers:longhand name="line-height" animation_type="normal"
                    spec="https://drafts.csswg.org/css2/visudet.html#propdef-line-height">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
 
     impl HasViewportPercentage for SpecifiedValue {
         fn has_viewport_percentage(&self) -> bool {
             match *self {
@@ -160,60 +160,60 @@
 </%helpers:longhand>
 
 // CSS Text Module Level 3
 
 // TODO(pcwalton): `full-width`
 ${helpers.single_keyword("text-transform",
                          "none capitalize uppercase lowercase",
                          extra_gecko_values="full-width",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.csswg.org/css-text/#propdef-text-transform")}
 
 ${helpers.single_keyword("hyphens", "manual none auto",
                          gecko_enum_prefix="StyleHyphens",
-                         products="gecko", animatable=False, extra_prefixes="moz",
+                         products="gecko", animation_type="none", extra_prefixes="moz",
                          spec="https://drafts.csswg.org/css-text/#propdef-hyphens")}
 
 // TODO: Support <percentage>
 ${helpers.single_keyword("-moz-text-size-adjust", "auto none",
                          gecko_constant_prefix="NS_STYLE_TEXT_SIZE_ADJUST",
-                         products="gecko", animatable=False,
+                         products="gecko", animation_type="none",
                          spec="https://drafts.csswg.org/css-size-adjust/#adjustment-control",
                          alias="-webkit-text-size-adjust")}
 
 ${helpers.predefined_type("text-indent",
                           "LengthOrPercentage",
                           "computed::LengthOrPercentage::Length(Au(0))",
-                          animatable=True,
+                          animation_type="normal",
                           spec="https://drafts.csswg.org/css-text/#propdef-text-indent")}
 
 // 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",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.csswg.org/css-text/#propdef-overflow-wrap",
                          alias="word-wrap")}
 
 // TODO(pcwalton): Support `word-break: keep-all` once we have better CJK support.
 ${helpers.single_keyword("word-break",
                          "normal break-all keep-all",
                          gecko_constant_prefix="NS_STYLE_WORDBREAK",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.csswg.org/css-text/#propdef-word-break")}
 
 // TODO(pcwalton): Support `text-justify: distribute`.
 <%helpers:single_keyword_computed name="text-justify"
                                   values="auto none inter-word"
                                   extra_gecko_values="inter-character"
                                   extra_specified="${'distribute' if product == 'gecko' else ''}"
                                   gecko_enum_prefix="StyleTextJustify"
-                                  animatable="False"
+                                  animation_type="none"
                                   spec="https://drafts.csswg.org/css-text/#propdef-text-justify">
     use values::HasViewportPercentage;
     no_viewport_percentage!(SpecifiedValue);
 
     impl ToComputedValue for SpecifiedValue {
         type ComputedValue = computed_value::T;
 
         #[inline]
@@ -243,21 +243,21 @@
         }
     }
 </%helpers:single_keyword_computed>
 
 ${helpers.single_keyword("text-align-last",
                          "auto start end left right center justify",
                          products="gecko",
                          gecko_constant_prefix="NS_STYLE_TEXT_ALIGN",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.csswg.org/css-text/#propdef-text-align-last")}
 
 // TODO make this a shorthand and implement text-align-last/text-align-all
-<%helpers:longhand name="text-align" animatable="False" need_clone="True"
+<%helpers:longhand name="text-align" animation_type="none" need_clone="True"
                    spec="https://drafts.csswg.org/css-text/#propdef-text-align">
     use values::computed::ComputedValueAsSpecified;
     use values::HasViewportPercentage;
     no_viewport_percentage!(SpecifiedValue);
     pub mod computed_value {
         use style_traits::ToCss;
         macro_rules! define_text_align {
             ( $( $name: ident ( $string: expr ) => $discriminant: expr, )+ ) => {
@@ -401,17 +401,17 @@
         impl ComputedValueAsSpecified for SpecifiedValue {}
         pub use self::computed_value::T as SpecifiedValue;
         pub fn parse(_context: &ParserContext, input: &mut Parser) -> Result<SpecifiedValue, ()> {
             computed_value::T::parse(input)
         }
     % endif
 </%helpers:longhand>
 
-<%helpers:longhand name="letter-spacing" boxed="True" animatable="True"
+<%helpers:longhand name="letter-spacing" boxed="True" animation_type="normal"
                    spec="https://drafts.csswg.org/css-text/#propdef-letter-spacing">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
 
     impl HasViewportPercentage for SpecifiedValue {
         fn has_viewport_percentage(&self) -> bool {
             match *self {
@@ -505,17 +505,17 @@
         if input.try(|input| input.expect_ident_matching("normal")).is_ok() {
             Ok(SpecifiedValue::Normal)
         } else {
             specified::Length::parse(context, input).map(SpecifiedValue::Specified)
         }
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="word-spacing" animatable="False"
+<%helpers:longhand name="word-spacing" animation_type="none"
                    spec="https://drafts.csswg.org/css-text/#propdef-word-spacing">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
 
     impl HasViewportPercentage for SpecifiedValue {
         fn has_viewport_percentage(&self) -> bool {
             match *self {
@@ -590,17 +590,17 @@
                                           .map(SpecifiedValue::Specified)
         }
     }
 </%helpers:longhand>
 
 <%helpers:longhand name="-servo-text-decorations-in-effect"
                    derived_from="display text-decoration"
                    need_clone="True" products="servo"
-                   animatable="False"
+                   animation_type="none"
                    spec="Nonstandard (Internal property used by Servo)">
     use cssparser::RGBA;
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::computed::ComputedValueAsSpecified;
 
     impl ComputedValueAsSpecified for SpecifiedValue {}
@@ -677,17 +677,17 @@
         context.mutate_style().mutate_inheritedtext().set__servo_text_decorations_in_effect(derived);
     }
 </%helpers:longhand>
 
 <%helpers:single_keyword_computed name="white-space"
                                   values="normal pre nowrap pre-wrap pre-line"
                                   gecko_constant_prefix="NS_STYLE_WHITESPACE"
                                   needs_conversion="True"
-                                  animatable="False"
+                                  animation_type="none"
                                   spec="https://drafts.csswg.org/css-text/#propdef-white-space">
     use values::computed::ComputedValueAsSpecified;
     use values::HasViewportPercentage;
     impl ComputedValueAsSpecified for SpecifiedValue {}
     no_viewport_percentage!(SpecifiedValue);
 
     impl SpecifiedValue {
         pub fn allow_wrap(&self) -> bool {
@@ -717,17 +717,17 @@
                 SpecifiedValue::pre_line => false,
                 SpecifiedValue::pre |
                 SpecifiedValue::pre_wrap => true,
             }
         }
     }
 </%helpers:single_keyword_computed>
 
-<%helpers:longhand name="text-shadow" animatable="True"
+<%helpers:longhand name="text-shadow" animation_type="normal"
                    spec="https://drafts.csswg.org/css-text-decor/#propdef-text-shadow">
     use cssparser;
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
 
     impl HasViewportPercentage for SpecifiedValue {
         fn has_viewport_percentage(&self) -> bool {
@@ -927,17 +927,17 @@
                     blur_radius: ToComputedValue::from_computed_value(&value.blur_radius),
                     color: Some(ToComputedValue::from_computed_value(&value.color)),
                 }
             }).collect())
         }
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="text-emphasis-style" products="gecko" need_clone="True" boxed="True" animatable="False"
+<%helpers:longhand name="text-emphasis-style" products="gecko" need_clone="True" boxed="True" animation_type="none"
                    spec="https://drafts.csswg.org/css-text-decor/#propdef-text-emphasis-style">
     use computed_values::writing_mode::T as writing_mode;
     use std::fmt;
     use style_traits::ToCss;
     use unicode_segmentation::UnicodeSegmentation;
     use values::HasViewportPercentage;
 
     no_viewport_percentage!(SpecifiedValue);
@@ -1135,17 +1135,17 @@
             (Some(fill), Err(_)) => KeywordValue::Fill(fill),
             (None, Ok(shape)) => KeywordValue::Shape(shape),
             _ => return Err(()),
         };
         Ok(SpecifiedValue::Keyword(keyword_value))
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="text-emphasis-position" animatable="False" products="gecko"
+<%helpers:longhand name="text-emphasis-position" animation_type="none" products="gecko"
                    spec="https://drafts.csswg.org/css-text-decor/#propdef-text-emphasis-position">
     use std::fmt;
     use values::computed::ComputedValueAsSpecified;
     use values::HasViewportPercentage;
     use style_traits::ToCss;
 
     define_css_keyword_enum!(HorizontalWritingModeValue:
                              "over" => Over,
@@ -1210,47 +1210,47 @@
             }
         }
     % endif
 </%helpers:longhand>
 
 ${helpers.predefined_type("text-emphasis-color", "CSSColor",
                           "::cssparser::Color::CurrentColor",
                           initial_specified_value="specified::CSSColor::currentcolor()",
-                          products="gecko", animatable=True,
+                          products="gecko", animation_type="normal",
                           complex_color=True, need_clone=True,
                           spec="https://drafts.csswg.org/css-text-decor/#propdef-text-emphasis-color")}
 
 
 ${helpers.predefined_type(
     "-moz-tab-size", "LengthOrNumber",
     "::values::Either::Second(8.0)",
     "parse_non_negative",
-    products="gecko", boxed=True, animatable=False,
+    products="gecko", boxed=True, animation_type="none",
     spec="https://drafts.csswg.org/css-text-3/#tab-size-property")}
 
 
 // CSS Compatibility
 // https://compat.spec.whatwg.org
 ${helpers.predefined_type(
     "-webkit-text-fill-color", "CSSColor",
     "CSSParserColor::CurrentColor",
-    products="gecko", animatable=True,
+    products="gecko", animation_type="normal",
     complex_color=True, need_clone=True,
     spec="https://compat.spec.whatwg.org/#the-webkit-text-fill-color")}
 
 ${helpers.predefined_type(
     "-webkit-text-stroke-color", "CSSColor",
     "CSSParserColor::CurrentColor",
     initial_specified_value="specified::CSSColor::currentcolor()",
-    products="gecko", animatable=True,
+    products="gecko", animation_type="normal",
     complex_color=True, need_clone=True,
     spec="https://compat.spec.whatwg.org/#the-webkit-text-stroke-color")}
 
-<%helpers:longhand products="gecko" name="-webkit-text-stroke-width" boxed="True" animatable="False"
+<%helpers:longhand products="gecko" name="-webkit-text-stroke-width" boxed="True" animation_type="none"
                    spec="https://compat.spec.whatwg.org/#the-webkit-text-stroke-width">
     use app_units::Au;
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::specified::{BorderWidth, Length};
 
     pub type SpecifiedValue = BorderWidth;
@@ -1272,30 +1272,30 @@
         BorderWidth::from_length(Length::zero())
     }
 </%helpers:longhand>
 
 
 // CSS Ruby Layout Module Level 1
 // https://drafts.csswg.org/css-ruby/
 ${helpers.single_keyword("ruby-align", "space-around start center space-between",
-                         products="gecko", animatable=False,
+                         products="gecko", animation_type="none",
                          spec="https://drafts.csswg.org/css-ruby/#ruby-align-property")}
 
 ${helpers.single_keyword("ruby-position", "over under",
-                         products="gecko", animatable=False,
+                         products="gecko", animation_type="none",
                          spec="https://drafts.csswg.org/css-ruby/#ruby-position-property")}
 
 // CSS Writing Modes Module Level 3
 // https://drafts.csswg.org/css-writing-modes-3/
 
 // The spec has "digits <integer>?" value in addition. But that value is
 // at-risk, and Gecko's layout code doesn't support that either. So we
 // can just take the easy way for now.
 ${helpers.single_keyword("text-combine-upright", "none all",
-                         products="gecko", animatable=False,
+                         products="gecko", animation_type="none",
                          spec="https://drafts.csswg.org/css-writing-modes-3/#text-combine-upright")}
 
 // SVG 1.1: Section 11 - Painting: Filling, Stroking and Marker Symbols
 ${helpers.single_keyword("text-rendering",
                          "auto optimizespeed optimizelegibility geometricprecision",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty")}
--- a/servo/components/style/properties/longhand/list.mako.rs
+++ b/servo/components/style/properties/longhand/list.mako.rs
@@ -1,17 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <% data.new_style_struct("List", inherited=True) %>
 
-${helpers.single_keyword("list-style-position", "outside inside", animatable=False,
+${helpers.single_keyword("list-style-position", "outside inside", animation_type="none",
                          spec="https://drafts.csswg.org/css-lists/#propdef-list-style-position")}
 
 // TODO(pcwalton): Implement the full set of counter styles per CSS-COUNTER-STYLES [1] 6.1:
 //
 //     decimal-leading-zero, armenian, upper-armenian, lower-armenian, georgian, lower-roman,
 //     upper-roman
 //
 // TODO(bholley): Missing quite a few gecko properties here as well.
@@ -29,24 +29,24 @@
                            cjk-heavenly-stem lower-greek hiragana hiragana-iroha katakana
                            katakana-iroha""",
     extra_gecko_values="""japanese-informal japanese-formal korean-hangul-formal
     korean-hanja-formal korean-hanja-informal simp-chinese-informal simp-chinese-formal
     trad-chinese-informal trad-chinese-formal ethiopic-numeric upper-roman lower-roman
     """,
     gecko_constant_prefix="NS_STYLE_LIST_STYLE",
     needs_conversion="True",
-    animatable=False,
+    animation_type="none",
     spec="https://drafts.csswg.org/css-lists/#propdef-list-style-type")}
 
 ${helpers.predefined_type("list-style-image", "UrlOrNone", "Either::Second(None_)",
-                          initial_specified_value="Either::Second(None_)", animatable=False,
+                          initial_specified_value="Either::Second(None_)", animation_type="none",
                           spec="https://drafts.csswg.org/css-lists/#propdef-list-style-image")}
 
-<%helpers:longhand name="quotes" animatable="False"
+<%helpers:longhand name="quotes" animation_type="none"
                    spec="https://drafts.csswg.org/css-content/#propdef-quotes">
     use cssparser::Token;
     use std::borrow::Cow;
     use std::fmt;
     use style_traits::ToCss;
     use values::computed::ComputedValueAsSpecified;
     use values::HasViewportPercentage;
 
@@ -113,12 +113,12 @@
             Err(())
         }
     }
 </%helpers:longhand>
 
 ${helpers.predefined_type("-moz-image-region",
                           "ClipRectOrAuto",
                           "computed::ClipRectOrAuto::auto()",
-                          animatable=False,
+                          animation_type="none",
                           products="gecko",
                           boxed="True",
                           spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-image-region)")}
--- a/servo/components/style/properties/longhand/margin.mako.rs
+++ b/servo/components/style/properties/longhand/margin.mako.rs
@@ -10,10 +10,10 @@
     <%
         spec = "https://drafts.csswg.org/css-box/#propdef-margin-%s" % side[0]
         if side[1]:
             spec = "https://drafts.csswg.org/css-logical-props/#propdef-margin-%s" % side[1]
     %>
     ${helpers.predefined_type("margin-%s" % side[0], "LengthOrPercentageOrAuto",
                               "computed::LengthOrPercentageOrAuto::Length(Au(0))",
                               alias=maybe_moz_logical_alias(product, side, "-moz-margin-%s"),
-                              animatable=True, logical = side[1], spec = spec)}
+                              animation_type="normal", logical = side[1], spec = spec)}
 % endfor
--- a/servo/components/style/properties/longhand/outline.mako.rs
+++ b/servo/components/style/properties/longhand/outline.mako.rs
@@ -7,20 +7,20 @@
 
 <% data.new_style_struct("Outline",
                          inherited=False,
                          additional_methods=[Method("outline_has_nonzero_width", "bool")]) %>
 
 // TODO(pcwalton): `invert`
 ${helpers.predefined_type("outline-color", "CSSColor", "computed::CSSColor::CurrentColor",
                           initial_specified_value="specified::CSSColor::currentcolor()",
-                          animatable=True, complex_color=True, need_clone=True,
+                          animation_type="normal", complex_color=True, need_clone=True,
                           spec="https://drafts.csswg.org/css-ui/#propdef-outline-color")}
 
-<%helpers:longhand name="outline-style" need_clone="True" animatable="False"
+<%helpers:longhand name="outline-style" need_clone="True" animation_type="none"
                    spec="https://drafts.csswg.org/css-ui/#propdef-outline-style">
 
     use std::fmt;
     use style_traits::ToCss;
     use values::specified::BorderStyle;
     use values::computed::ComputedValueAsSpecified;
 
     pub type SpecifiedValue = Either<Auto, BorderStyle>;
@@ -59,17 +59,17 @@
                     Err(())
                 } else {
                     Ok(result)
                 }
             })
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="outline-width" animatable="True"
+<%helpers:longhand name="outline-width" animation_type="normal"
                    spec="https://drafts.csswg.org/css-ui/#propdef-outline-width">
     use app_units::Au;
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
 
     impl ToCss for SpecifiedValue {
         fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
@@ -119,14 +119,14 @@
 
 // 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",
         boxed=True,
-        animatable=False,
+        animation_type="none",
         spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius)")}
 % endfor
 
-${helpers.predefined_type("outline-offset", "Length", "Au(0)", products="servo gecko", animatable=True,
+${helpers.predefined_type("outline-offset", "Length", "Au(0)", products="servo gecko", animation_type="normal",
                           spec="https://drafts.csswg.org/css-ui/#propdef-outline-offset")}
--- a/servo/components/style/properties/longhand/padding.mako.rs
+++ b/servo/components/style/properties/longhand/padding.mako.rs
@@ -12,12 +12,12 @@
         if side[1]:
             spec = "https://drafts.csswg.org/css-logical-props/#propdef-padding-%s" % side[1]
     %>
     ${helpers.predefined_type("padding-%s" % side[0], "LengthOrPercentage",
                               "computed::LengthOrPercentage::Length(Au(0))",
                               "parse_non_negative",
                               alias=maybe_moz_logical_alias(product, side, "-moz-padding-%s"),
                               needs_context=False,
-                              animatable=True,
+                              animation_type="normal",
                               logical = side[1],
                               spec = spec)}
 % endfor
--- a/servo/components/style/properties/longhand/pointing.mako.rs
+++ b/servo/components/style/properties/longhand/pointing.mako.rs
@@ -1,17 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <% data.new_style_struct("Pointing", inherited=True, gecko_name="UserInterface") %>
 
-<%helpers:longhand name="cursor" boxed="${product == 'gecko'}" animatable="False"
+<%helpers:longhand name="cursor" boxed="${product == 'gecko'}" animation_type="none"
   spec="https://drafts.csswg.org/css-ui/#cursor">
     pub use self::computed_value::T as SpecifiedValue;
     use values::HasViewportPercentage;
     use values::computed::ComputedValueAsSpecified;
     use values::specified::url::SpecifiedUrl;
 
     impl ComputedValueAsSpecified for SpecifiedValue {}
     no_viewport_percentage!(SpecifiedValue);
@@ -142,40 +142,40 @@
             keyword: try!(computed_value::Keyword::parse(context, input)),
         })
     }
 </%helpers:longhand>
 
 // 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", animatable=False,
+${helpers.single_keyword("pointer-events", "auto none", animation_type="none",
                          spec="https://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty")}
 
 ${helpers.single_keyword("-moz-user-input", "auto none enabled disabled",
                          products="gecko", gecko_ffi_name="mUserInput",
                          gecko_enum_prefix="StyleUserInput",
                          gecko_inexhaustive=True,
-                         animatable=False,
+                         animation_type="none",
                          spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-input)")}
 
 ${helpers.single_keyword("-moz-user-modify", "read-only read-write write-only",
                          products="gecko", gecko_ffi_name="mUserModify",
                          gecko_enum_prefix="StyleUserModify",
                          needs_conversion=True,
-                         animatable=False,
+                         animation_type="none",
                          spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-modify)")}
 
 ${helpers.single_keyword("-moz-user-focus",
                          "none ignore normal select-after select-before select-menu select-same select-all",
                          products="gecko", gecko_ffi_name="mUserFocus",
                          gecko_enum_prefix="StyleUserFocus",
                          gecko_inexhaustive=True,
-                         animatable=False,
+                         animation_type="none",
                          spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-focus)")}
 
 ${helpers.predefined_type("caret-color",
                           "ColorOrAuto",
                           "Either::Second(Auto)",
                           spec="https://drafts.csswg.org/css-ui/#caret-color",
-                          animatable="True",
+                          animation_type="normal",
                           boxed=True,
                           products="gecko")}
--- a/servo/components/style/properties/longhand/position.mako.rs
+++ b/servo/components/style/properties/longhand/position.mako.rs
@@ -8,179 +8,178 @@
 
 <% data.new_style_struct("Position", inherited=False) %>
 
 // "top" / "left" / "bottom" / "right"
 % for side in PHYSICAL_SIDES:
     ${helpers.predefined_type(side, "LengthOrPercentageOrAuto",
                               "computed::LengthOrPercentageOrAuto::Auto",
                               spec="https://www.w3.org/TR/CSS2/visuren.html#propdef-%s" % side,
-                              animatable=True)}
+                              animation_type="normal")}
 % endfor
 // offset-* logical properties, map to "top" / "left" / "bottom" / "right"
 % for side in LOGICAL_SIDES:
     ${helpers.predefined_type("offset-%s" % side, "LengthOrPercentageOrAuto",
                               "computed::LengthOrPercentageOrAuto::Auto",
                               spec="https://drafts.csswg.org/css-logical-props/#propdef-offset-%s" % side,
-                              animatable=True, logical=True)}
+                              animation_type="normal", logical=True)}
 % endfor
 
 ${helpers.predefined_type("z-index", "IntegerOrAuto",
                           "Either::Second(Auto)",
                           spec="https://www.w3.org/TR/CSS2/visuren.html#z-index",
                           creates_stacking_context=True,
-                          animatable="True")}
+                          animation_type="normal")}
 
 // CSS Flexible Box Layout Module Level 1
 // http://www.w3.org/TR/css3-flexbox/
 
 // Flex container properties
 ${helpers.single_keyword("flex-direction", "row row-reverse column column-reverse",
                          spec="https://drafts.csswg.org/css-flexbox/#flex-direction-property",
-                         extra_prefixes="webkit", animatable=False)}
+                         extra_prefixes="webkit", animation_type="none")}
 
 ${helpers.single_keyword("flex-wrap", "nowrap wrap wrap-reverse",
                          spec="https://drafts.csswg.org/css-flexbox/#flex-wrap-property",
-                         extra_prefixes="webkit", animatable=False)}
+                         extra_prefixes="webkit", animation_type="none")}
 
 % if product == "servo":
     // FIXME: Update Servo to support the same Syntax as Gecko.
     ${helpers.single_keyword("justify-content", "flex-start stretch flex-end center space-between space-around",
                              extra_prefixes="webkit",
                              spec="https://drafts.csswg.org/css-align/#propdef-justify-content",
-                             animatable=False)}
+                             animation_type="none")}
 % else:
     ${helpers.predefined_type(name="justify-content",
                               type="AlignJustifyContent",
                               initial_value="specified::AlignJustifyContent::normal()",
                               spec="https://drafts.csswg.org/css-align/#propdef-justify-content",
                               extra_prefixes="webkit",
-                              animatable=False)}
+                              animation_type="none")}
 % endif
 
 % if product == "servo":
     // FIXME: Update Servo to support the same Syntax as Gecko.
     ${helpers.single_keyword("align-content", "stretch flex-start flex-end center space-between space-around",
                              extra_prefixes="webkit",
                              spec="https://drafts.csswg.org/css-align/#propdef-align-content",
-                             animatable=False)}
+                             animation_type="none")}
 
     ${helpers.single_keyword("align-items",
                              "stretch flex-start flex-end center baseline",
-                             need_clone=True,
                              extra_prefixes="webkit",
                              spec="https://drafts.csswg.org/css-flexbox/#align-items-property",
-                             animatable=False)}
+                             animation_type="discrete")}
 % else:
     ${helpers.predefined_type(name="align-content",
                               type="AlignJustifyContent",
                               initial_value="specified::AlignJustifyContent::normal()",
                               spec="https://drafts.csswg.org/css-align/#propdef-align-content",
                               extra_prefixes="webkit",
-                              animatable=False)}
+                              animation_type="none")}
 
     ${helpers.predefined_type(name="align-items",
                               type="AlignItems",
                               initial_value="specified::AlignItems::normal()",
                               spec="https://drafts.csswg.org/css-align/#propdef-align-items",
                               extra_prefixes="webkit",
-                              animatable=False)}
+                              animation_type="discrete")}
 
     ${helpers.predefined_type(name="justify-items",
                               type="JustifyItems",
                               initial_value="specified::JustifyItems::auto()",
                               spec="https://drafts.csswg.org/css-align/#propdef-justify-items",
-                              animatable=False)}
+                              animation_type="none")}
 % endif
 
 // Flex item properties
 ${helpers.predefined_type("flex-grow", "Number",
                           "0.0", "parse_non_negative",
                           spec="https://drafts.csswg.org/css-flexbox/#flex-grow-property",
                           extra_prefixes="webkit",
                           needs_context=False,
-                          animatable=True)}
+                          animation_type="normal")}
 
 ${helpers.predefined_type("flex-shrink", "Number",
                           "1.0", "parse_non_negative",
                           spec="https://drafts.csswg.org/css-flexbox/#flex-shrink-property",
                           extra_prefixes="webkit",
                           needs_context=False,
-                          animatable=True)}
+                          animation_type="normal")}
 
 // https://drafts.csswg.org/css-align/#align-self-property
 % if product == "servo":
     // FIXME: Update Servo to support the same syntax as Gecko.
     ${helpers.single_keyword("align-self", "auto stretch flex-start flex-end center baseline",
                              need_clone=True,
                              extra_prefixes="webkit",
                              spec="https://drafts.csswg.org/css-flexbox/#propdef-align-self",
-                             animatable=False)}
+                             animation_type="none")}
 % else:
     ${helpers.predefined_type(name="align-self",
                               type="AlignJustifySelf",
                               initial_value="specified::AlignJustifySelf::auto()",
                               spec="https://drafts.csswg.org/css-align/#align-self-property",
                               extra_prefixes="webkit",
-                              animatable=False)}
+                              animation_type="none")}
 
     ${helpers.predefined_type(name="justify-self",
                               type="AlignJustifySelf",
                               initial_value="specified::AlignJustifySelf::auto()",
                               spec="https://drafts.csswg.org/css-align/#justify-self-property",
-                              animatable=False)}
+                              animation_type="none")}
 % endif
 
 // https://drafts.csswg.org/css-flexbox/#propdef-order
 ${helpers.predefined_type("order", "Integer", "0",
                           extra_prefixes="webkit",
-                          animatable=True,
+                          animation_type="normal",
                           spec="https://drafts.csswg.org/css-flexbox/#order-property")}
 
 // FIXME: Gecko doesn't support content value yet.
 // FIXME: This property should be animatable.
 ${helpers.predefined_type("flex-basis",
                           "LengthOrPercentageOrAuto" if product == "gecko" else
                           "LengthOrPercentageOrAutoOrContent",
                           "computed::LengthOrPercentageOrAuto::Auto" if product == "gecko" else
                           "computed::LengthOrPercentageOrAutoOrContent::Auto",
                           "parse_non_negative",
                           needs_context=False,
                           spec="https://drafts.csswg.org/css-flexbox/#flex-basis-property",
                           extra_prefixes="webkit",
-                          animatable=True if product == "gecko" else False)}
+                          animation_type="normal" if product == "gecko" else "none")}
 
 % for (size, logical) in ALL_SIZES:
     <%
       spec = "https://drafts.csswg.org/css-box/#propdef-%s"
       if logical:
         spec = "https://drafts.csswg.org/css-logical-props/#propdef-%s"
     %>
     // width, height, block-size, inline-size
     ${helpers.predefined_type("%s" % size,
                               "LengthOrPercentageOrAuto",
                               "computed::LengthOrPercentageOrAuto::Auto",
                               "parse_non_negative",
                               needs_context=False,
                               spec=spec % size,
-                              animatable=True, logical = logical)}
+                              animation_type="normal", logical = logical)}
     % if product == "gecko":
         % for min_max in ["min", "max"]:
             <%
                 MinMax = min_max.title()
                 initial = "None" if "max" == min_max else "Auto"
             %>
 
             // min-width, min-height, min-block-size, min-inline-size,
             // max-width, max-height, max-block-size, max-inline-size
             //
             // Keyword values are only valid in the inline direction; they must
             // be replaced with auto/none in block.
             <%helpers:longhand name="${min_max}-${size}" spec="${spec % ('%s-%s' % (min_max, size))}"
-                               animatable="True" logical="${logical}" predefined_type="${MinMax}Length">
+                               animation_type="normal" logical="${logical}" predefined_type="${MinMax}Length">
 
                 use std::fmt;
                 use style_traits::ToCss;
                 use values::HasViewportPercentage;
                 use values::specified::${MinMax}Length;
 
                 impl HasViewportPercentage for SpecifiedValue {
                     fn has_viewport_percentage(&self) -> bool {
@@ -246,78 +245,78 @@
     % else:
         // servo versions (no keyword support)
         ${helpers.predefined_type("min-%s" % size,
                                   "LengthOrPercentage",
                                   "computed::LengthOrPercentage::Length(Au(0))",
                                   "parse_non_negative",
                                   needs_context=False,
                                   spec=spec % ("min-%s" % size),
-                                  animatable=True, logical = logical)}
+                                  animation_type="normal", logical = logical)}
         ${helpers.predefined_type("max-%s" % size,
                                   "LengthOrPercentageOrNone",
                                   "computed::LengthOrPercentageOrNone::None",
                                   "parse_non_negative",
                                   needs_context=False,
                                   spec=spec % ("min-%s" % size),
-                                  animatable=True, logical = logical)}
+                                  animation_type="normal", logical = logical)}
     % endif
 % endfor
 
 ${helpers.single_keyword("box-sizing",
                          "content-box border-box",
                          extra_prefixes="moz webkit",
                          spec="https://drafts.csswg.org/css-ui/#propdef-box-sizing",
-                         animatable=False)}
+                         animation_type="none")}
 
 ${helpers.single_keyword("object-fit", "fill contain cover none scale-down",
-                         products="gecko", animatable=False,
+                         products="gecko", animation_type="none",
                          spec="https://drafts.csswg.org/css-images/#propdef-object-fit")}
 
 ${helpers.predefined_type("object-position",
                           "Position",
                           "computed::Position::zero()",
                           products="gecko",
                           boxed="True",
                           spec="https://drafts.csswg.org/css-images-3/#the-object-position",
-                          animatable=True)}
+                          animation_type="normal")}
 
 % for kind in ["row", "column"]:
     ${helpers.predefined_type("grid-%s-gap" % kind,
                               "LengthOrPercentage",
                               "computed::LengthOrPercentage::Length(Au(0))",
                               spec="https://drafts.csswg.org/css-grid/#propdef-grid-%s-gap" % kind,
-                              animatable=True,
+                              animation_type="normal",
                               products="gecko")}
 
     % for range in ["start", "end"]:
         ${helpers.predefined_type("grid-%s-%s" % (kind, range),
                                   "GridLine",
                                   "Default::default()",
-                                  animatable=False,
+                                  animation_type="none",
                                   spec="https://drafts.csswg.org/css-grid/#propdef-grid-%s-%s" % (kind, range),
                                   products="gecko",
                                   boxed=True)}
     % endfor
 
     // NOTE: According to the spec, this should handle multiple values of `<track-size>`,
     // but gecko supports only a single value
     ${helpers.predefined_type("grid-auto-%ss" % kind,
                               "TrackSize",
                               "Default::default()",
-                              animatable=False,
+                              animation_type="none",
                               spec="https://drafts.csswg.org/css-grid/#propdef-grid-auto-%ss" % kind,
                               products="gecko",
                               boxed=True)}
 % endfor
 
 <%helpers:longhand name="grid-auto-flow"
         spec="https://drafts.csswg.org/css-grid/#propdef-grid-auto-flow"
         products="gecko"
-        animatable="False">
+        animation_type="none">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::computed::ComputedValueAsSpecified;
 
     pub type SpecifiedValue = computed_value::T;
 
     pub mod computed_value {
--- a/servo/components/style/properties/longhand/svg.mako.rs
+++ b/servo/components/style/properties/longhand/svg.mako.rs
@@ -6,64 +6,64 @@
 
 <% 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",
-                 animatable=False,
+                 animation_type="none",
                  spec="https://www.w3.org/TR/SVG11/text.html#DominantBaselineProperty")}
 
 ${helpers.single_keyword("vector-effect", "none non-scaling-stroke",
-                         products="gecko", animatable=False,
+                         products="gecko", animation_type="none",
                          spec="https://www.w3.org/TR/SVGTiny12/painting.html#VectorEffectProperty")}
 
 // Section 13 - Gradients and Patterns
 
 ${helpers.predefined_type(
     "stop-color", "CSSColor",
     "CSSParserColor::RGBA(RGBA::new(0, 0, 0, 255))",
     products="gecko",
-    animatable=False,
+    animation_type="none",
     spec="https://www.w3.org/TR/SVGTiny12/painting.html#StopColorProperty")}
 
 ${helpers.predefined_type("stop-opacity", "Opacity", "1.0",
                           products="gecko",
-                          animatable=False,
+                          animation_type="none",
                           spec="https://www.w3.org/TR/SVGTiny12/painting.html#propdef-stop-opacity")}
 
 // Section 15 - Filter Effects
 
 ${helpers.predefined_type(
     "flood-color", "CSSColor",
     "CSSParserColor::RGBA(RGBA::new(0, 0, 0, 255))",
     products="gecko",
-    animatable=False,
+    animation_type="none",
     spec="https://www.w3.org/TR/SVG/filters.html#FloodColorProperty")}
 
 ${helpers.predefined_type("flood-opacity", "Opacity",
-                          "1.0", products="gecko", animatable=False,
+                          "1.0", products="gecko", animation_type="none",
                           spec="https://www.w3.org/TR/SVG/filters.html#FloodOpacityProperty")}
 
 ${helpers.predefined_type(
     "lighting-color", "CSSColor",
     "CSSParserColor::RGBA(RGBA::new(255, 255, 255, 255))",
     products="gecko",
-    animatable=False,
+    animation_type="none",
     spec="https://www.w3.org/TR/SVG/filters.html#LightingColorProperty")}
 
 // CSS Masking Module Level 1
 // https://drafts.fxtf.org/css-masking
 ${helpers.single_keyword("mask-type", "luminance alpha",
-                         products="gecko", animatable=False,
+                         products="gecko", animation_type="none",
                          spec="https://drafts.fxtf.org/css-masking/#propdef-mask-type")}
 
-<%helpers:longhand name="clip-path" animatable="False" products="gecko" boxed="True"
+<%helpers:longhand name="clip-path" animation_type="none" products="gecko" boxed="True"
                    creates_stacking_context="True"
                    spec="https://drafts.fxtf.org/css-masking/#propdef-clip-path">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::specified::basic_shape::{ShapeSource, GeometryBox};
 
     pub mod computed_value {
@@ -86,20 +86,20 @@
 
     no_viewport_percentage!(SpecifiedValue);
 </%helpers:longhand>
 
 ${helpers.single_keyword("mask-mode",
                          "match-source alpha luminance",
                          vector=True,
                          products="gecko",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.fxtf.org/css-masking/#propdef-mask-mode")}
 
-<%helpers:vector_longhand name="mask-repeat" products="gecko" animatable="False" extra_prefixes="webkit"
+<%helpers:vector_longhand name="mask-repeat" products="gecko" animation_type="none" extra_prefixes="webkit"
                           spec="https://drafts.fxtf.org/css-masking/#propdef-mask-repeat">
     pub use properties::longhands::background_repeat::single_value::parse;
     pub use properties::longhands::background_repeat::single_value::SpecifiedValue;
     pub use properties::longhands::background_repeat::single_value::computed_value;
     pub use properties::longhands::background_repeat::single_value::RepeatKeyword;
     use properties::longhands::background_repeat::single_value;
 
     #[inline]
@@ -108,17 +108,17 @@
     }
 
     #[inline]
     pub fn get_initial_specified_value() -> SpecifiedValue {
         SpecifiedValue::Other(RepeatKeyword::NoRepeat, None)
     }
 </%helpers:vector_longhand>
 
-<%helpers:vector_longhand name="mask-position-x" products="gecko" animatable="True" extra_prefixes="webkit"
+<%helpers:vector_longhand name="mask-position-x" products="gecko" animation_type="normal" extra_prefixes="webkit"
                           spec="https://drafts.fxtf.org/css-masking/#propdef-mask-position">
     pub use properties::longhands::background_position_x::single_value::get_initial_value;
     pub use properties::longhands::background_position_x::single_value::get_initial_position_value;
     pub use properties::longhands::background_position_x::single_value::get_initial_specified_value;
     pub use properties::longhands::background_position_x::single_value::parse;
     pub use properties::longhands::background_position_x::single_value::SpecifiedValue;
     pub use properties::longhands::background_position_x::single_value::computed_value;
     use properties::animated_properties::{Interpolate, RepeatableListInterpolate};
@@ -129,17 +129,17 @@
         fn interpolate(&self, other: &Self, progress: f64) -> Result<Self, ()> {
             Ok(MaskPositionX(try!(self.0.interpolate(&other.0, progress))))
         }
     }
 
     impl RepeatableListInterpolate for MaskPositionX {}
 </%helpers:vector_longhand>
 
-<%helpers:vector_longhand name="mask-position-y" products="gecko" animatable="True" extra_prefixes="webkit"
+<%helpers:vector_longhand name="mask-position-y" products="gecko" animation_type="normal" extra_prefixes="webkit"
                           spec="https://drafts.fxtf.org/css-masking/#propdef-mask-position">
     pub use properties::longhands::background_position_y::single_value::get_initial_value;
     pub use properties::longhands::background_position_y::single_value::get_initial_position_value;
     pub use properties::longhands::background_position_y::single_value::get_initial_specified_value;
     pub use properties::longhands::background_position_y::single_value::parse;
     pub use properties::longhands::background_position_y::single_value::SpecifiedValue;
     pub use properties::longhands::background_position_y::single_value::computed_value;
     use properties::animated_properties::{Interpolate, RepeatableListInterpolate};
@@ -156,29 +156,29 @@
 </%helpers:vector_longhand>
 
 ${helpers.single_keyword("mask-clip",
                          "border-box content-box padding-box",
                          extra_gecko_values="fill-box stroke-box view-box no-clip",
                          vector=True,
                          products="gecko",
                          extra_prefixes="webkit",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.fxtf.org/css-masking/#propdef-mask-clip")}
 
 ${helpers.single_keyword("mask-origin",
                          "border-box content-box padding-box",
                          extra_gecko_values="fill-box stroke-box view-box",
                          vector=True,
                          products="gecko",
                          extra_prefixes="webkit",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.fxtf.org/css-masking/#propdef-mask-origin")}
 
-<%helpers:longhand name="mask-size" products="gecko" animatable="True" extra_prefixes="webkit"
+<%helpers:longhand name="mask-size" products="gecko" animation_type="normal" extra_prefixes="webkit"
                    spec="https://drafts.fxtf.org/css-masking/#propdef-mask-size">
     use properties::longhands::background_size;
     pub use ::properties::longhands::background_size::SpecifiedValue;
     pub use ::properties::longhands::background_size::single_value as single_value;
     pub use ::properties::longhands::background_size::computed_value as computed_value;
 
     #[inline]
     pub fn get_initial_value() -> computed_value::T {
@@ -190,20 +190,20 @@
     }
 </%helpers:longhand>
 
 ${helpers.single_keyword("mask-composite",
                          "add subtract intersect exclude",
                          vector=True,
                          products="gecko",
                          extra_prefixes="webkit",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.fxtf.org/css-masking/#propdef-mask-composite")}
 
-<%helpers:vector_longhand name="mask-image" products="gecko" animatable="False" extra_prefixes="webkit"
+<%helpers:vector_longhand name="mask-image" products="gecko" animation_type="none" extra_prefixes="webkit"
                           has_uncacheable_values="${product == 'gecko'}"
                           creates_stacking_context="True"
                           spec="https://drafts.fxtf.org/css-masking/#propdef-mask-image">
     use std::fmt;
     use style_traits::ToCss;
     use std::sync::Arc;
     use values::specified::Image;
     use values::specified::url::SpecifiedUrl;
--- a/servo/components/style/properties/longhand/table.mako.rs
+++ b/servo/components/style/properties/longhand/table.mako.rs
@@ -2,22 +2,22 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <% data.new_style_struct("Table", inherited=False) %>
 
 ${helpers.single_keyword("table-layout", "auto fixed",
-                         gecko_ffi_name="mLayoutStrategy", animatable=False,
+                         gecko_ffi_name="mLayoutStrategy", animation_type="none",
                          spec="https://drafts.csswg.org/css-tables/#propdef-table-layout")}
 
 <%helpers:longhand name="-x-span" products="gecko"
                    spec="Internal-only (for `<col span>` pres attr)"
-                   animatable="False"
+                   animation_type="none"
                    internal="True">
     use values::HasViewportPercentage;
     use values::computed::ComputedValueAsSpecified;
 
     impl ComputedValueAsSpecified for SpecifiedValue {}
     no_viewport_percentage!(SpecifiedValue);
     pub type SpecifiedValue = computed_value::T;
     pub mod computed_value {
--- a/servo/components/style/properties/longhand/text.mako.rs
+++ b/servo/components/style/properties/longhand/text.mako.rs
@@ -7,17 +7,17 @@
 
 <% data.new_style_struct("Text",
                          inherited=False,
                          gecko_name="TextReset",
                          additional_methods=[Method("has_underline", "bool"),
                                              Method("has_overline", "bool"),
                                              Method("has_line_through", "bool")]) %>
 
-<%helpers:longhand name="text-overflow" animatable="False" boxed="True"
+<%helpers:longhand name="text-overflow" animation_type="none" boxed="True"
                    spec="https://drafts.csswg.org/css-ui/#propdef-text-overflow">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::computed::ComputedValueAsSpecified;
     use cssparser;
 
     impl ComputedValueAsSpecified for SpecifiedValue {}
@@ -92,23 +92,23 @@
             }
             Ok(())
         }
     }
 </%helpers:longhand>
 
 ${helpers.single_keyword("unicode-bidi",
                          "normal embed isolate bidi-override isolate-override plaintext",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.csswg.org/css-writing-modes/#propdef-unicode-bidi")}
 
 // FIXME: This prop should be animatable.
 <%helpers:longhand name="text-decoration-line"
                    custom_cascade="${product == 'servo'}"
-                   animatable="False"
+                   animation_type="none"
                    spec="https://drafts.csswg.org/css-text-decor/#propdef-text-decoration-line">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::computed::ComputedValueAsSpecified;
 
     impl ComputedValueAsSpecified for SpecifiedValue {}
     no_viewport_percentage!(SpecifiedValue);
@@ -214,30 +214,30 @@
                 longhands::_servo_text_decorations_in_effect::derive_from_text_decoration(context);
         }
     % endif
 </%helpers:longhand>
 
 ${helpers.single_keyword("text-decoration-style",
                          "solid double dotted dashed wavy -moz-none",
                          products="gecko",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.csswg.org/css-text-decor/#propdef-text-decoration-style")}
 
 ${helpers.predefined_type(
     "text-decoration-color", "CSSColor",
     "computed::CSSColor::CurrentColor",
     initial_specified_value="specified::CSSColor::currentcolor()",
     complex_color=True,
     products="gecko",
-    animatable=True,
+    animation_type="normal",
     spec="https://drafts.csswg.org/css-text-decor/#propdef-text-decoration-color")}
 
 <%helpers:longhand name="initial-letter"
-                   animatable="False"
+                   animation_type="none"
                    products="none"
                    spec="https://drafts.csswg.org/css-inline/#sizing-drop-initials">
     use std::fmt;
     use style_traits::ToCss;
     use values::HasViewportPercentage;
     use values::computed::ComputedValueAsSpecified;
     use values::specified::{Number, Integer};
 
--- a/servo/components/style/properties/longhand/ui.mako.rs
+++ b/servo/components/style/properties/longhand/ui.mako.rs
@@ -8,25 +8,25 @@
 // CSS Basic User Interface Module Level 1
 // https://drafts.csswg.org/css-ui-3/
 <% data.new_style_struct("UI", inherited=False, gecko_name="UIReset") %>
 
 // TODO spec says that UAs should not support this
 // we should probably remove from gecko (https://bugzilla.mozilla.org/show_bug.cgi?id=1328331)
 ${helpers.single_keyword("ime-mode", "auto normal active disabled inactive",
                          products="gecko", gecko_ffi_name="mIMEMode",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.csswg.org/css-ui/#input-method-editor")}
 
 ${helpers.single_keyword("-moz-user-select", "auto text none all element elements" +
                             " toggle tri-state -moz-all -moz-none -moz-text",
                          products="gecko",
                          alias="-webkit-user-select",
                          gecko_ffi_name="mUserSelect",
                          gecko_enum_prefix="StyleUserSelect",
-                         animatable=False,
+                         animation_type="none",
                          spec="https://drafts.csswg.org/css-ui-4/#propdef-user-select")}
 
 ${helpers.single_keyword("-moz-window-dragging", "default drag no-drag", products="gecko",
                          gecko_ffi_name="mWindowDragging",
                          gecko_enum_prefix="StyleWindowDragging",
-                         animatable=False,
+                         animation_type="none",
                          spec="None (Nonstandard Firefox-only property)")}
--- a/servo/components/style/properties/longhand/xul.mako.rs
+++ b/servo/components/style/properties/longhand/xul.mako.rs
@@ -7,54 +7,54 @@
 
 // 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_enum_prefix="StyleBoxAlign",
                          gecko_inexhaustive=True,
-                         animatable=False,
+                         animation_type="none",
                          alias="-webkit-box-align",
                          spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/box-align)")}
 
 ${helpers.single_keyword("-moz-box-direction", "normal reverse",
                          products="gecko", gecko_ffi_name="mBoxDirection",
                          gecko_enum_prefix="StyleBoxDirection",
-                         animatable=False,
+                         animation_type="none",
                          alias="-webkit-box-direction",
                          spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/box-direction)")}
 
 ${helpers.predefined_type("-moz-box-flex", "Number", "0.0", "parse_non_negative",
                           products="gecko", gecko_ffi_name="mBoxFlex",
                           needs_context=False,
-                          animatable=False,
+                          animation_type="none",
                           alias="-webkit-box-flex",
                           spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/box-flex)")}
 
 ${helpers.single_keyword("-moz-box-orient", "horizontal vertical",
                          products="gecko", gecko_ffi_name="mBoxOrient",
                          gecko_enum_prefix="StyleBoxOrient",
-                         animatable=False,
+                         animation_type="none",
                          alias="-webkit-box-orient",
                          spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient)")}
 
 ${helpers.single_keyword("-moz-box-pack", "start center end justify",
                          products="gecko", gecko_ffi_name="mBoxPack",
                          gecko_enum_prefix="StyleBoxPack",
-                         animatable=False,
+                         animation_type="none",
                          alias="-webkit-box-pack",
                          spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/box-pack)")}
 
 ${helpers.single_keyword("-moz-stack-sizing", "stretch-to-fit ignore",
                          products="gecko", gecko_ffi_name="mStretchStack",
                          gecko_constant_prefix="NS_STYLE_STACK_SIZING",
-                         animatable=False,
+                         animation_type="none",
                          spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-stack-sizing)")}
 
 ${helpers.predefined_type("-moz-box-ordinal-group", "Integer", "0",
                           parse_method="parse_non_negative",
                           needs_context=False,
                           products="gecko",
                           alias="-webkit-box-ordinal-group",
                           gecko_ffi_name="mBoxOrdinal",
-                          animatable=False,
+                          animation_type="none",
                           spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-box-ordinal-group)")}