diff --git a/components/style/properties/longhands/border.mako.rs b/components/style/properties/longhands/border.mako.rs
index 4098a94208f..80e95ae84b3 100644
--- a/components/style/properties/longhands/border.mako.rs
+++ b/components/style/properties/longhands/border.mako.rs
@@ -126,7 +126,7 @@ ${helpers.predefined_type(
     initial_value="generics::rect::Rect::all(computed::NonNegativeLengthOrNumber::zero())",
     initial_specified_value="generics::rect::Rect::all(specified::NonNegativeLengthOrNumber::zero())",
     spec="https://drafts.csswg.org/css-backgrounds/#border-image-outset",
-    animation_value_type="discrete",
+    animation_value_type="NonNegativeLengthOrNumberRect",
     boxed=True,
 )}
 
@@ -147,7 +147,7 @@ ${helpers.predefined_type(
     initial_value="computed::BorderImageWidth::all(computed::BorderImageSideWidth::one())",
     initial_specified_value="specified::BorderImageWidth::all(specified::BorderImageSideWidth::one())",
     spec="https://drafts.csswg.org/css-backgrounds/#border-image-width",
-    animation_value_type="discrete",
+    animation_value_type="BorderImageWidth",
     boxed=True,
 )}
 
@@ -158,6 +158,6 @@ ${helpers.predefined_type(
     initial_value="computed::BorderImageSlice::hundred_percent()",
     initial_specified_value="specified::BorderImageSlice::hundred_percent()",
     spec="https://drafts.csswg.org/css-backgrounds/#border-image-slice",
-    animation_value_type="discrete",
+    animation_value_type="BorderImageSlice",
     boxed=True,
 )}
diff --git a/components/style/values/computed/mod.rs b/components/style/values/computed/mod.rs
index aafb42b284a..6b5bfa41ad9 100644
--- a/components/style/values/computed/mod.rs
+++ b/components/style/values/computed/mod.rs
@@ -577,7 +577,16 @@ impl From<GreaterThanOrEqualToOneNumber> for CSSFloat {
 
 #[allow(missing_docs)]
 #[derive(
-    Clone, ComputeSquaredDistance, Copy, Debug, MallocSizeOf, PartialEq, ToCss, ToResolvedValue,
+    Animate,
+    Clone,
+    ComputeSquaredDistance,
+    Copy,
+    Debug,
+    MallocSizeOf,
+    PartialEq,
+    ToAnimatedZero,
+    ToCss,
+    ToResolvedValue,
 )]
 #[repr(C, u8)]
 pub enum NumberOrPercentage {
diff --git a/components/style/values/generics/border.rs b/components/style/values/generics/border.rs
index 755a368a958..37d91464b01 100644
--- a/components/style/values/generics/border.rs
+++ b/components/style/values/generics/border.rs
@@ -12,13 +12,17 @@ use style_traits::{CssWriter, ToCss};
 
 /// A generic value for a single side of a `border-image-width` property.
 #[derive(
+    Animate,
     Clone,
+    ComputeSquaredDistance,
     Copy,
     Debug,
     MallocSizeOf,
     Parse,
     PartialEq,
     SpecifiedValueInfo,
+    ToAnimatedValue,
+    ToAnimatedZero,
     ToComputedValue,
     ToCss,
     ToResolvedValue,
@@ -41,12 +45,16 @@ pub use self::GenericBorderImageSideWidth as BorderImageSideWidth;
 
 /// A generic value for the `border-image-slice` property.
 #[derive(
+    Animate,
     Clone,
+    ComputeSquaredDistance,
     Copy,
     Debug,
     MallocSizeOf,
     PartialEq,
     SpecifiedValueInfo,
+    ToAnimatedValue,
+    ToAnimatedZero,
     ToComputedValue,
     ToCss,
     ToResolvedValue,
@@ -58,6 +66,7 @@ pub struct GenericBorderImageSlice<NumberOrPercentage> {
     #[css(field_bound)]
     pub offsets: Rect<NumberOrPercentage>,
     /// Whether to fill the middle part.
+    #[animation(constant)]
     #[css(represents_keyword)]
     pub fill: bool,
 }
diff --git a/components/style/values/generics/rect.rs b/components/style/values/generics/rect.rs
index e4623535146..5164bd77463 100644
--- a/components/style/values/generics/rect.rs
+++ b/components/style/values/generics/rect.rs
@@ -21,6 +21,7 @@ use style_traits::{CssWriter, ParseError, ToCss};
     PartialEq,
     SpecifiedValueInfo,
     ToAnimatedValue,
+    ToAnimatedZero,
     ToComputedValue,
     ToResolvedValue,
     ToShmem,