docs(css): Create easing function pages

[dipikabh]

Description

Currently, the documentation for linear(), cubic-bezier(), and steps() easing functions exists only within the <easing-function> data type page.

This PR:

• Creates individual reference pages for linear(), cubic-bezier(), and steps() functions from the content on the <easing-function> page.

• Updates the <easing-function> page:

  • Moves the function details from the "Description" section to the respective function pages.
  • Moves relevant examples to the respective function pages.
  • Aligns the "Values" section with the "Formal syntax" section (retains the definition of the function keywords here).

• Similarly, aligns the "Parameters" section on each function page with its "Formal syntax".

• The "Specifications" section is being updated in Add spec_url for new CSS easing functions browser-compat-data#25041.

Note

This is the first iteration of the function pages. Future improvements can include:

• Adding interactive examples and more code snippets to the "Examples" section
• Checking the content against the specification to ensure coverage on MDN

Related issues and pull requests

Fixes #29923

[github-actions]

Preview URLs (7 pages)

• /en-US/docs/Glossary/Bezier_curve
• /en-US/docs/Mozilla/Firefox/Releases/65
• /en-US/docs/Web/CSS/CSS_Functions
• /en-US/docs/Web/CSS/easing-function/cubic-bezier
• /en-US/docs/Web/CSS/easing-function/linear
• /en-US/docs/Web/CSS/easing-function/steps
• /en-US/docs/Web/CSS/easing-function

External URLs (7)

URL: /en-US/docs/Mozilla/Firefox/Releases/65
Title: Firefox 65 for developers

• https://bugzil.la/1496619 (2 times) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/easing-function
Title: <easing-function>

• https://cubic-bezier.com/ (1 time) (Note! This may be a new URL 👀)
• https://linear-easing-generator.netlify.app/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/easing-function/cubic-bezier
Title: cubic-bezier()

• https://cubic-bezier.com/ (1 time) (Note! This may be a new URL 👀)
• https://en.wikipedia.org/wiki/Function_%28mathematics%29 (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/easing-function/steps
Title: steps()

• https://en.wikipedia.org/wiki/Step_function (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/easing-function/linear
Title: linear()

• https://linear-easing-generator.netlify.app/ (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2024-11-22 14:46:16)

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[pepelsbey]

Nicely done! Thanks :) I have one fix and a few suggestions:

• Quotes inside of alts might not be useful for the target users or even potentially problematic since we encode them.
• The alt descriptions we provide for graphs might not be comprehensible due to their complexity and length. I wonder if we should reconsider the approach and explain them in prose next to images.

Here’s the longest example:

Graphs of Input progress to Output progress, of which steps(2, jump-start) shows horizontal lines extending 0.5 unit from (0, 0.5) and (0.5, 1), respectively, with empty circles at the origin and (0.5, 0.5); steps(4, jump-end) shows horizontal lines extending 0.25 unit from (0, 0), (0.25, 0.25), (0.5, 0.5), and (0.75, 0.75), respectively, with unfilled circles at (0.25, 0), (0.5, 0.25), and (0.75, 0.5), and a solid circle at (1, 1); steps(5, jump-none) shows horizontal lines extending 0.2 unit from (0, 0), (0.2, 0.25), (0.4, 0.5), (0.6, 0.75), and (0.8, 1), respectively, with unfilled circles at (0.2, 0), (0.4, 0.25), (0.6, 0.5), and (0.8, 0.75); steps(3, jump-both) shows horizontal lines extending 1/3 unit from (0, 0.25), (1/3, 0.5), and (2/3, 0.75),respectively , with a solid circle at (1, 1) and unfilled circles at the origin, (1/3, 0.25), (2/3, 0.5), and (1, 0.75).

Describing this picture:

We might also split the picture in multiple parts and describe each individually.

[bsmth]

Super, I'm leaving a +1 -> @pepelsbey I have two suggestions if you want to take a look 👀

[pepelsbey]