diff --git a/Libraries/LibWeb/CSS/ComputedProperties.cpp b/Libraries/LibWeb/CSS/ComputedProperties.cpp
index 4de39b32d75..0bf65957cd1 100644
--- a/Libraries/LibWeb/CSS/ComputedProperties.cpp
+++ b/Libraries/LibWeb/CSS/ComputedProperties.cpp
@@ -76,6 +76,12 @@ bool ComputedProperties::is_property_inherited(PropertyID property_id) const
     return m_property_inherited[n / 8] & (1 << (n % 8));
 }
 
+bool ComputedProperties::is_animated_property_inherited(PropertyID property_id) const
+{
+    size_t n = to_underlying(property_id);
+    return m_animated_property_inherited[n / 8] & (1 << (n % 8));
+}
+
 void ComputedProperties::set_property_inherited(PropertyID property_id, Inherited inherited)
 {
     size_t n = to_underlying(property_id);
@@ -85,6 +91,15 @@ void ComputedProperties::set_property_inherited(PropertyID property_id, Inherite
         m_property_inherited[n / 8] &= ~(1 << (n % 8));
 }
 
+void ComputedProperties::set_animated_property_inherited(PropertyID property_id, Inherited inherited)
+{
+    size_t n = to_underlying(property_id);
+    if (inherited == Inherited::Yes)
+        m_animated_property_inherited[n / 8] |= (1 << (n % 8));
+    else
+        m_animated_property_inherited[n / 8] &= ~(1 << (n % 8));
+}
+
 void ComputedProperties::set_property(PropertyID id, NonnullRefPtr<StyleValue const> value, Inherited inherited, Important important)
 {
     m_property_values[to_underlying(id)] = move(value);
@@ -99,9 +114,15 @@ void ComputedProperties::revert_property(PropertyID id, ComputedProperties const
     set_property_inherited(id, style_for_revert.is_property_inherited(id) ? Inherited::Yes : Inherited::No);
 }
 
-void ComputedProperties::set_animated_property(PropertyID id, NonnullRefPtr<StyleValue const> value)
+void ComputedProperties::set_animated_property(PropertyID id, NonnullRefPtr<StyleValue const> value, Inherited inherited)
 {
     m_animated_property_values.set(id, move(value));
+    set_animated_property_inherited(id, inherited);
+}
+
+void ComputedProperties::remove_animated_property(PropertyID id)
+{
+    m_animated_property_values.remove(id);
 }
 
 void ComputedProperties::reset_animated_properties(Badge<Animations::KeyframeEffect>)
diff --git a/Libraries/LibWeb/CSS/ComputedProperties.h b/Libraries/LibWeb/CSS/ComputedProperties.h
index 196143cfef9..73d4130434f 100644
--- a/Libraries/LibWeb/CSS/ComputedProperties.h
+++ b/Libraries/LibWeb/CSS/ComputedProperties.h
@@ -53,11 +53,14 @@ public:
 
     bool is_property_important(PropertyID property_id) const;
     bool is_property_inherited(PropertyID property_id) const;
+    bool is_animated_property_inherited(PropertyID property_id) const;
     void set_property_important(PropertyID, Important);
     void set_property_inherited(PropertyID, Inherited);
+    void set_animated_property_inherited(PropertyID, Inherited);
 
     void set_property(PropertyID, NonnullRefPtr<StyleValue const> value, Inherited = Inherited::No, Important = Important::No);
-    void set_animated_property(PropertyID, NonnullRefPtr<StyleValue const> value);
+    void set_animated_property(PropertyID, NonnullRefPtr<StyleValue const> value, Inherited = Inherited::No);
+    void remove_animated_property(PropertyID);
     enum class WithAnimationsApplied {
         No,
         Yes,
@@ -270,6 +273,7 @@ private:
     Array<RefPtr<StyleValue const>, number_of_properties> m_property_values;
     Array<u8, ceil_div(number_of_properties, 8uz)> m_property_important {};
     Array<u8, ceil_div(number_of_properties, 8uz)> m_property_inherited {};
+    Array<u8, ceil_div(number_of_properties, 8uz)> m_animated_property_inherited {};
 
     HashMap<PropertyID, NonnullRefPtr<StyleValue const>> m_animated_property_values;
 
diff --git a/Libraries/LibWeb/CSS/StyleComputer.cpp b/Libraries/LibWeb/CSS/StyleComputer.cpp
index 773729bbba3..750110b744d 100644
--- a/Libraries/LibWeb/CSS/StyleComputer.cpp
+++ b/Libraries/LibWeb/CSS/StyleComputer.cpp
@@ -1701,7 +1701,7 @@ void StyleComputer::compute_defaulted_property_value(ComputedProperties& style,
     if (!value_slot) {
         if (is_inherited_property(property_id)) {
             if (auto animated_inherit_value = get_animated_inherit_value(property_id, element, pseudo_element); animated_inherit_value.has_value())
-                style.set_animated_property(property_id, animated_inherit_value.value());
+                style.set_animated_property(property_id, animated_inherit_value.value(), ComputedProperties::Inherited::Yes);
             style.set_property(
                 property_id,
                 get_inherit_value(property_id, element, pseudo_element),
@@ -1720,7 +1720,7 @@ void StyleComputer::compute_defaulted_property_value(ComputedProperties& style,
 
     if (value_slot->is_inherit()) {
         if (auto animated_inherit_value = get_animated_inherit_value(property_id, element, pseudo_element); animated_inherit_value.has_value())
-            style.set_animated_property(property_id, animated_inherit_value.value());
+            style.set_animated_property(property_id, animated_inherit_value.value(), ComputedProperties::Inherited::Yes);
         value_slot = get_inherit_value(property_id, element, pseudo_element);
         style.set_property_inherited(property_id, ComputedProperties::Inherited::Yes);
         return;
@@ -1732,7 +1732,7 @@ void StyleComputer::compute_defaulted_property_value(ComputedProperties& style,
         if (is_inherited_property(property_id)) {
             // then if it is an inherited property, this is treated as inherit,
             if (auto animated_inherit_value = get_animated_inherit_value(property_id, element, pseudo_element); animated_inherit_value.has_value())
-                style.set_animated_property(property_id, animated_inherit_value.value());
+                style.set_animated_property(property_id, animated_inherit_value.value(), ComputedProperties::Inherited::Yes);
             value_slot = get_inherit_value(property_id, element, pseudo_element);
             style.set_property_inherited(property_id, ComputedProperties::Inherited::Yes);
         } else {
@@ -2693,7 +2693,7 @@ GC::Ref<ComputedProperties> StyleComputer::compute_properties(DOM::Element& elem
 
         computed_style->set_property(property_id, value.release_nonnull(), inherited);
         if (animated_value.has_value())
-            computed_style->set_animated_property(property_id, animated_value.value());
+            computed_style->set_animated_property(property_id, animated_value.value(), inherited);
 
         if (property_id == PropertyID::AnimationName) {
             computed_style->set_animation_name_source(cascaded_properties.property_source(property_id));
diff --git a/Libraries/LibWeb/DOM/Element.cpp b/Libraries/LibWeb/DOM/Element.cpp
index 2f6bf43ed1c..9462d4fcb78 100644
--- a/Libraries/LibWeb/DOM/Element.cpp
+++ b/Libraries/LibWeb/DOM/Element.cpp
@@ -817,6 +817,17 @@ CSS::RequiredInvalidationAfterStyleChange Element::recompute_inherited_style()
         }
         if (!computed_properties->is_property_inherited(property_id))
             continue;
+
+        RefPtr<CSS::StyleValue const> old_animated_value = computed_properties->animated_property_values().get(property_id).value_or({});
+        RefPtr<CSS::StyleValue const> new_animated_value = CSS::StyleComputer::get_animated_inherit_value(property_id, this).map([&](auto& value) { return value.ptr(); }).value_or({});
+
+        if (new_animated_value)
+            computed_properties->set_animated_property(property_id, new_animated_value.release_nonnull(), CSS::ComputedProperties::Inherited::Yes);
+        else if (old_animated_value && computed_properties->is_animated_property_inherited(property_id))
+            computed_properties->remove_animated_property(property_id);
+
+        invalidation |= CSS::compute_property_invalidation(property_id, old_animated_value, new_animated_value);
+
         RefPtr new_value = CSS::StyleComputer::get_inherit_value(property_id, this);
         computed_properties->set_property(property_id, *new_value, CSS::ComputedProperties::Inherited::Yes);
         invalidation |= CSS::compute_property_invalidation(property_id, old_value, new_value);
diff --git a/Tests/LibWeb/Text/expected/css/recompute-inherited-style-animated-properties.txt b/Tests/LibWeb/Text/expected/css/recompute-inherited-style-animated-properties.txt
new file mode 100644
index 00000000000..d70568e7568
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/css/recompute-inherited-style-animated-properties.txt
@@ -0,0 +1 @@
+rgb(128, 0, 128)
diff --git a/Tests/LibWeb/Text/input/css/recompute-inherited-style-animated-properties.html b/Tests/LibWeb/Text/input/css/recompute-inherited-style-animated-properties.html
new file mode 100644
index 00000000000..6af8bb86cc5
--- /dev/null
+++ b/Tests/LibWeb/Text/input/css/recompute-inherited-style-animated-properties.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+    <style>
+        #bar {
+            color: inherit;
+        }
+    </style>
+    <div id="foo"><div id="bar"></div></div>
+    <script src="../include.js"></script>
+    <script>
+        asyncTest(done => {
+            // Wait for first layout to complete so we ensure this is done via `recompute_inherited_style()`
+            setTimeout(() => {
+                const animation = foo.animate([{ color: "red" }, { color: "blue" }], {
+                    duration: 1000,
+                });
+
+                animation.pause();
+                animation.currentTime = 500;
+
+                println(getComputedStyle(bar).color);
+                done();
+            }, 100);
+        });
+    </script>
+</html>