diff --git a/components/style/properties/helpers/animated_properties.mako.rs b/components/style/properties/helpers/animated_properties.mako.rs
index 6ed00b5d4ca..f923588338a 100644
--- a/components/style/properties/helpers/animated_properties.mako.rs
+++ b/components/style/properties/helpers/animated_properties.mako.rs
@@ -2771,3 +2771,50 @@ impl<T, U> ComputeDistance for Either<T, U>
         }
     }
 }
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+#[allow(missing_docs)]
+pub enum IntermediateColor {
+    CurrentColor,
+    IntermediateRGBA(IntermediateRGBA),
+}
+
+impl Interpolate for IntermediateColor {
+    #[inline]
+    fn interpolate(&self, other: &Self, progress: f64) -> Result<Self, ()> {
+        match (*self, *other) {
+            (IntermediateColor::IntermediateRGBA(ref this), IntermediateColor::IntermediateRGBA(ref other)) => {
+                this.interpolate(other, progress).map(IntermediateColor::IntermediateRGBA)
+            }
+            // FIXME: Bug 1345709: Implement currentColor animations.
+            _ => Err(()),
+        }
+    }
+}
+
+impl <'a> From<<&'a CSSParserColor> for IntermediateColor {
+    fn from(color: &CSSParserColor) -> IntermediateColor {
+        match *color {
+            CSSParserColor::RGBA(ref color) =>
+                IntermediateColor::IntermediateRGBA(IntermediateRGBA::new(color.red_f32(),
+                                                                          color.green_f32(),
+                                                                          color.blue_f32(),
+                                                                          color.alpha_f32())),
+            CSSParserColor::CurrentColor => IntermediateColor::CurrentColor,
+        }
+    }
+}
+
+impl <'a> From<<&'a IntermediateColor> for CSSParserColor {
+    fn from(color: &IntermediateColor) -> CSSParserColor {
+        match *color {
+            IntermediateColor::IntermediateRGBA(ref color) =>
+                CSSParserColor::RGBA(RGBA::from_floats(color.red,
+                                                       color.green,
+                                                       color.blue,
+                                                       color.alpha)),
+            IntermediateColor::CurrentColor => CSSParserColor::CurrentColor,
+        }
+    }
+}
diff --git a/components/style/properties/longhand/background.mako.rs b/components/style/properties/longhand/background.mako.rs
index 3ff33c0981d..96119dd2c02 100644
--- a/components/style/properties/longhand/background.mako.rs
+++ b/components/style/properties/longhand/background.mako.rs
@@ -10,7 +10,7 @@ ${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",
-    animation_value_type="ComputedValue", complex_color=True)}
+    animation_value_type="IntermediateColor", complex_color=True)}
 
 <%helpers:vector_longhand name="background-image" animation_value_type="none"
                           spec="https://drafts.csswg.org/css-backgrounds/#the-background-image"
diff --git a/components/style/properties/longhand/border.mako.rs b/components/style/properties/longhand/border.mako.rs
index be4b76a1a10..cad750ba165 100644
--- a/components/style/properties/longhand/border.mako.rs
+++ b/components/style/properties/longhand/border.mako.rs
@@ -20,7 +20,7 @@
                               "::cssparser::Color::CurrentColor",
                               alias=maybe_moz_logical_alias(product, side, "-moz-border-%s-color"),
                               spec=maybe_logical_spec(side, "color"),
-                              animation_value_type="ComputedValue", logical = side[1])}
+                              animation_value_type="IntermediateColor", logical = side[1])}
 % endfor
 
 % for side in ALL_SIDES:
diff --git a/components/style/properties/longhand/column.mako.rs b/components/style/properties/longhand/column.mako.rs
index 44f02ad3dbf..64d8c86b7f4 100644
--- a/components/style/properties/longhand/column.mako.rs
+++ b/components/style/properties/longhand/column.mako.rs
@@ -75,7 +75,7 @@ ${helpers.single_keyword("column-fill", "balance auto", extra_prefixes="moz",
 ${helpers.predefined_type("column-rule-color", "CSSColor",
                           "::cssparser::Color::CurrentColor",
                           initial_specified_value="specified::CSSColor::currentcolor()",
-                          products="gecko", animation_value_type="ComputedValue", extra_prefixes="moz",
+                          products="gecko", animation_value_type="IntermediateColor", extra_prefixes="moz",
                           complex_color=True, need_clone=True,
                           spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule-color")}
 
diff --git a/components/style/properties/longhand/inherited_text.mako.rs b/components/style/properties/longhand/inherited_text.mako.rs
index 4238d23222d..4811689e5fc 100644
--- a/components/style/properties/longhand/inherited_text.mako.rs
+++ b/components/style/properties/longhand/inherited_text.mako.rs
@@ -1205,7 +1205,7 @@ ${helpers.single_keyword("text-align-last",
 ${helpers.predefined_type("text-emphasis-color", "CSSColor",
                           "::cssparser::Color::CurrentColor",
                           initial_specified_value="specified::CSSColor::currentcolor()",
-                          products="gecko", animation_value_type="ComputedValue",
+                          products="gecko", animation_value_type="IntermediateColor",
                           complex_color=True, need_clone=True,
                           spec="https://drafts.csswg.org/css-text-decor/#propdef-text-emphasis-color")}
 
@@ -1223,7 +1223,7 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "-webkit-text-fill-color", "CSSColor",
     "CSSParserColor::CurrentColor",
-    products="gecko", animation_value_type="ComputedValue",
+    products="gecko", animation_value_type="IntermediateColor",
     complex_color=True, need_clone=True,
     spec="https://compat.spec.whatwg.org/#the-webkit-text-fill-color")}
 
@@ -1231,7 +1231,7 @@ ${helpers.predefined_type(
     "-webkit-text-stroke-color", "CSSColor",
     "CSSParserColor::CurrentColor",
     initial_specified_value="specified::CSSColor::currentcolor()",
-    products="gecko", animation_value_type="ComputedValue",
+    products="gecko", animation_value_type="IntermediateColor",
     complex_color=True, need_clone=True,
     spec="https://compat.spec.whatwg.org/#the-webkit-text-stroke-color")}
 
diff --git a/components/style/properties/longhand/outline.mako.rs b/components/style/properties/longhand/outline.mako.rs
index c5112047e2c..fcfebe6a00e 100644
--- a/components/style/properties/longhand/outline.mako.rs
+++ b/components/style/properties/longhand/outline.mako.rs
@@ -12,7 +12,7 @@
 // TODO(pcwalton): `invert`
 ${helpers.predefined_type("outline-color", "CSSColor", "computed::CSSColor::CurrentColor",
                           initial_specified_value="specified::CSSColor::currentcolor()",
-                          animation_value_type="ComputedValue", complex_color=True, need_clone=True,
+                          animation_value_type="IntermediateColor", complex_color=True, need_clone=True,
                           spec="https://drafts.csswg.org/css-ui/#propdef-outline-color")}
 
 <%helpers:longhand name="outline-style" need_clone="True" animation_value_type="none"
diff --git a/components/style/properties/longhand/text.mako.rs b/components/style/properties/longhand/text.mako.rs
index e042c43e047..4d29e2b0e77 100644
--- a/components/style/properties/longhand/text.mako.rs
+++ b/components/style/properties/longhand/text.mako.rs
@@ -228,7 +228,7 @@ ${helpers.predefined_type(
     initial_specified_value="specified::CSSColor::currentcolor()",
     complex_color=True,
     products="gecko",
-    animation_value_type="ComputedValue",
+    animation_value_type="IntermediateColor",
     spec="https://drafts.csswg.org/css-text-decor/#propdef-text-decoration-color")}
 
 <%helpers:longhand name="initial-letter"