diff --git a/dom/animation/CSSAnimation.cpp b/dom/animation/CSSAnimation.cpp
index 9a094daf965..43f329e63c1 100644
--- a/dom/animation/CSSAnimation.cpp
+++ b/dom/animation/CSSAnimation.cpp
@@ -343,16 +343,28 @@ void CSSAnimationKeyframeEffect::UpdateTiming(
 void CSSAnimationKeyframeEffect::SetKeyframes(JSContext* aContext,
                                               JS::Handle<JSObject*> aKeyframes,
                                               ErrorResult& aRv) {
-  // SetKeyframes will trigger the keyframe generation (for missing 0% and
+  nsTArray<Keyframe> keyframes = KeyframeUtils::GetKeyframesFromObject(
+      aContext, mDocument, aKeyframes, "KeyframeEffect.setKeyframes", aRv);
+  if (aRv.Failed()) {
+    return;
+  }
+
+  // SetKeyframes below will trigger the keyframe generation (for missing 0% and
   // 100%), so we set this flag to avoid generating the keyframes if they come
   // from JS.
+  // Note that this is different from CSSAnimationProperties::Keyframes below
+  // because we have to avoid generating keyframes even if we don't have
+  // animation, i.e. this is a keyframe-effect-specific flag for keyframes
+  // generation.
   mIgnoreKeyframesGeneration = true;
-  KeyframeEffect::SetKeyframes(aContext, aKeyframes, aRv);
 
-  if (aRv.Failed()) {
-    mIgnoreKeyframesGeneration = false;
-    return;
-  }
+  // This is from the JS API, so we use the associated animation's timeline and
+  // range if any.
+  RefPtr<const ComputedStyle> style = GetTargetComputedStyle(Flush::None);
+  KeyframeEffect::SetKeyframes(
+      std::move(keyframes), style,
+      mAnimation ? mAnimation->GetTimeline() : nullptr,
+      mAnimation ? &mAnimation->GetTimelineRange() : nullptr);
 
   if (CSSAnimation* cssAnimation = GetOwningCSSAnimation()) {
     cssAnimation->PropertiesWillSetFromJS(CSSAnimationProperties::Keyframes);
@@ -493,8 +505,8 @@ static Keyframe* GetOrCreateInitialOrFinalComputedKeyframe(
 // https://drafts.csswg.org/web-animations-1/#computed-keyframes
 bool CSSAnimationKeyframeEffect::GetComputedKeyframes(
     nsTArray<Keyframe>& aKeyframes) const {
-  // Check if we do need to do this. If it is overrideen by JS, we should skip
-  // this function and the caller should just use the specified keyframes.
+  // Check if we do need to do this. This flag is set if the keyframes come from
+  // the JS API.
   if (mIgnoreKeyframesGeneration) {
     return false;
   }