fix(api): Use internal example in KeyFrameEffect pages

files/en-us/web/api/keyframeeffect/getkeyframes/index.md

@@ -27,24 +27,65 @@ Returns a sequence of objects with the following format:
 - `property value pairs`
   - : As many property value pairs as are contained in each keyframe of the animation.
 - `offset`
-  - : The offset of the keyframe specified as a number between `0.0` and `1.0` inclusive or `null`. This is equivalent to specifying start and end states in percentages in CSS stylesheets using `@keyframes`. This will be `null` if the keyframe is automatically spaced using {{domxref("KeyframeEffect.spacing")}}.
+  - : The offset of the keyframe specified as a number between `0.0` and `1.0` inclusive or `null`. This is equivalent to specifying start and end states in percentages in CSS stylesheets using `@keyframes`. This will be `null` if the keyframe is automatically spaced.
 - `computedOffset`
-  - : The computed offset for this keyframe, calculated when the list of computed keyframes was produced according to {{domxref("KeyframeEffect.spacing")}}. Unlike **`offset`,** above, the **`computedOffset`** is never `null`.
+  - : The computed offset for this keyframe, calculated when the list of computed keyframes was produced. Unlike **`offset`,** above, the **`computedOffset`** is never `null`.
 - `easing`
   - : The [easing function](/en-US/docs/Web/CSS/easing-function) used from this keyframe until the next keyframe in the series.
 - `composite`
   - : The {{domxref("KeyframeEffect.composite")}} operation used to combine the values specified in this keyframe with the underlying value. This will be absent if the composite operation specified on the effect is being used.
 
 ## Examples
 
-In the [Red Queen Race](https://codepen.io/rachelnabors/pen/PNGGaV) example, we can inspect Alice and the RedQueen's animation to see its individual keyframes like so:
+In the following example, we can inspect the rolling animation to see its keyframes using the `getKeyframes()` method:
 
 ```js
-// Return the array of keyframes
+const emoji = document.querySelector("div"); // element to animate
+
+const rollingKeyframes = new KeyframeEffect(
+  emoji,
+  [
+    { transform: "translateX(0) rotate(0)" }, // keyframe
+    { transform: "translateX(200px) rotate(1.3turn)" }, // keyframe
+  ],
+  {
+    // keyframe options
+    duration: 2000,
+    direction: "alternate",
+    easing: "ease-in-out",
+    iterations: "Infinity",
+  },
+);
+
+const rollingAnimation = new Animation(rollingKeyframes, document.timeline);
+rollingAnimation.play();
+
+console.log(rollingAnimation.effect.getKeyframes());
+```
+
+```html
+<div>🤣</div>
+<hr />
+```
 
-redQueen_alice.effect.getKeyframes();
+```css
+hr {
+  background: linear-gradient(to bottom, red, transparent);
+  height: 1rem;
+  margin: 0;
+}
+
+div {
+  width: fit-content;
+  margin-left: calc(50% - 132px);
+  font-size: 64px;
+  user-select: none;
+  margin-top: 1rem;
+}
 ```
 
+{{ EmbedLiveSample("Examples", "100%", '120') }}
+
 ## Specifications
 
 {{Specifications}}

files/en-us/web/api/keyframeeffect/index.md

@@ -44,29 +44,55 @@ _This interface inherits some of its methods from its parent, {{domxref("Animati
 
 ## Examples
 
-In the [Follow the White Rabbit example](https://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010), the KeyframeEffect constructor is used to create a set of keyframes that dictate how the White Rabbit should animate down the hole:
+In the following example, the KeyframeEffect constructor is used to create a set of keyframes that dictate how the rofl emoji should roll on the floor:
 
 ```js
-const whiteRabbit = document.getElementById("rabbit");
+const emoji = document.querySelector("div"); // element to animate
 
-const rabbitDownKeyframes = new KeyframeEffect(
-  whiteRabbit, // element to animate
+const rollingKeyframes = new KeyframeEffect(
+  emoji,
   [
-    { transform: "translateY(0%)" }, // keyframe
-    { transform: "translateY(100%)" }, // keyframe
+    { transform: "translateX(0) rotate(0)" }, // keyframe
+    { transform: "translateX(200px) rotate(1.3turn)" }, // keyframe
   ],
-  { duration: 3000, fill: "forwards" }, // keyframe options
+  {
+    // keyframe options
+    duration: 2000,
+    direction: "alternate",
+    easing: "ease-in-out",
+    iterations: "Infinity",
+  },
 );
 
-const rabbitDownAnimation = new Animation(
-  rabbitDownKeyframes,
-  document.timeline,
-);
+const rollingAnimation = new Animation(rollingKeyframes, document.timeline);
+
+// play rofl animation
+rollingAnimation.play();
+```
 
-// Play rabbit animation
-rabbitDownAnimation.play();
+```html
+<div>🤣</div>
+<hr />
 ```
 
+```css
+hr {
+  background: linear-gradient(to bottom, red, transparent);
+  height: 1rem;
+  margin: 0;
+}
+
+div {
+  width: fit-content;
+  margin-left: calc(50% - 132px);
+  font-size: 64px;
+  user-select: none;
+  margin-top: 1rem;
+}
+```
+
+{{ EmbedLiveSample("Examples", "100%", '120') }}
+
 ## Specifications
 
 {{Specifications}}

files/en-us/web/api/keyframeeffect/keyframeeffect/index.md

@@ -76,29 +76,53 @@ The single argument constructor (see above) creates a clone of an existing {{dom
 
 ## Examples
 
-In the [Follow the White Rabbit example](https://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010), the `KeyframeEffect` constructor is used to create a set of keyframes that dictate how the White Rabbit should animate down the hole:
+In the following example, the KeyframeEffect constructor is used to create a set of keyframes that dictate how the emoji should roll on the floor:
 
 ```js
-const whiteRabbit = document.getElementById("rabbit");
+const emoji = document.querySelector("div"); // element to animate
 
-const rabbitDownKeyframes = new KeyframeEffect(
-  whiteRabbit, // element to animate
+const rollingKeyframes = new KeyframeEffect(
+  emoji,
   [
-    { transform: "translateY(0%)" }, // keyframe
-    { transform: "translateY(100%)" }, // keyframe
+    { transform: "translateX(0) rotate(0)" }, // keyframe
+    { transform: "translateX(200px) rotate(1.3turn)" }, // keyframe
   ],
-  { duration: 3000, fill: "forwards" }, // keyframe options
+  {
+    // keyframe options
+    duration: 2000,
+    direction: "alternate",
+    easing: "ease-in-out",
+    iterations: "Infinity",
+  },
 );
 
-const rabbitDownAnimation = new Animation(
-  rabbitDownKeyframes,
-  document.timeline,
-);
+const rollingAnimation = new Animation(rollingKeyframes, document.timeline);
+rollingAnimation.play();
+```
 
-// Play rabbit animation
-rabbitDownAnimation.play();
+```html
+<div>🤣</div>
+<hr />
 ```
 
+```css
+hr {
+  background: linear-gradient(to bottom, red, transparent);
+  height: 1rem;
+  margin: 0;
+}
+
+div {
+  width: fit-content;
+  margin-left: calc(50% - 132px);
+  font-size: 64px;
+  user-select: none;
+  margin-top: 1rem;
+}
+```
+
+{{ EmbedLiveSample("Examples", "100%", '120') }}
+
 ## Specifications
 
 {{Specifications}}

files/en-us/web/api/keyframeeffect/pseudoelement/index.md

@@ -30,12 +30,14 @@ A string or `null`.
 
 ```css
 #text::after {
-  content: "⭐";
+  content: "👹";
   display: inline-block; /* Needed as the `transform` property does not apply to inline elements */
+  font-size: 2rem;
 }
 #text::before {
-  content: "😊";
+  content: "🤠";
   display: inline-block;
+  font-size: 2rem;
 }
 ```
 
@@ -72,7 +74,7 @@ switchPseudoElement();
 logPseudoElement();
 ```
 
-{{EmbedLiveSample("Examples", "100", "70")}}
+{{EmbedLiveSample("Examples", "100", "80")}}
 
 ## Specifications
 

files/en-us/web/api/keyframeeffect/target/index.md

@@ -16,21 +16,56 @@ An {{domxref("Element")}} or `null`.
 
 ## Examples
 
-In the [Follow the White Rabbit example](https://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010), `whiteRabbit` sets the `target` element to be animated:
+In the following example, `emoji` has been set as the `target` element to be animated:
 
 ```js
-const whiteRabbit = document.getElementById("rabbit");
+const emoji = document.querySelector("div"); // element to animate
 
-const rabbitDownKeyframes = new KeyframeEffect(
-  whiteRabbit,
-  [{ transform: "translateY(0%)" }, { transform: "translateY(100%)" }],
-  { duration: 3000, fill: "forwards" },
+const rollingKeyframes = new KeyframeEffect(
+  emoji,
+  [
+    { transform: "translateX(0) rotate(0)" }, // keyframe
+    { transform: "translateX(200px) rotate(1.3turn)" }, // keyframe
+  ],
+  {
+    // keyframe options
+    duration: 2000,
+    direction: "alternate",
+    easing: "ease-in-out",
+    iterations: "Infinity",
+  },
 );
 
-// returns <div id="rabbit">Click the rabbit's ears!</div>
-rabbitDownKeyframes.target;
+const rollingAnimation = new Animation(rollingKeyframes, document.timeline);
+rollingAnimation.play();
+
+// logs "<div>🤣</div>"
+console.log(rollingKeyframes.target);
+```
+
+```html
+<div>🤣</div>
+<hr />
 ```
 
+```css
+hr {
+  background: linear-gradient(to bottom, red, transparent);
+  height: 1rem;
+  margin: 0;
+}
+
+div {
+  width: fit-content;
+  margin-left: calc(50% - 132px);
+  font-size: 64px;
+  user-select: none;
+  margin-top: 1rem;
+}
+```
+
+{{ EmbedLiveSample("Examples", "100%", '120') }}
+
 ## Specifications
 
 {{Specifications}}

files/en-us/web/css/object-fit/index.md

@@ -9,6 +9,9 @@ browser-compat: css.properties.object-fit
 
 The **`object-fit`** [CSS](/en-US/docs/Web/CSS) property sets how the content of a [replaced element](/en-US/docs/Web/CSS/Replaced_element), such as an {{HTMLElement("img")}} or {{HTMLElement("video")}}, should be resized to fit its container.
 
+> [!NOTE]
+> The `object-fit` has no effect on {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, and {{HTMLElement("fencedframe")}} elements.
+
 You can alter the alignment of the replaced element's content object within the element's box using the {{cssxref("object-position")}} property.
 
 {{EmbedInteractiveExample("pages/css/object-fit.html")}}