Skip to content

Commit 861dc1b

Browse files
estelleJosh-Cenachrisdavidmills
authored
New CSS module: easing functions (mdn#40645)
* New module: easing functions * New module: easing functions * links to new page * Update index.md * Fix links * Apply suggestions from code review Co-authored-by: Chris Mills <chrisdavidmills@gmail.com> * Update files/en-us/web/css/css_easing_functions/index.md * Update files/en-us/web/css/css_easing_functions/index.md * Update files/en-us/web/css/css_easing_functions/index.md * Update files/en-us/web/css/css_easing_functions/index.md Co-authored-by: Chris Mills <chrisdavidmills@gmail.com> --------- Co-authored-by: Joshua Chen <sidachen2003@gmail.com> Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
1 parent 8654d09 commit 861dc1b

File tree

7 files changed

+67
-4
lines changed

7 files changed

+67
-4
lines changed

‎files/en-us/web/css/animation-timing-function/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -578,6 +578,7 @@ The following image shows graphs of all the `step()` function values used in thi
578578

579579
- [Using CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
580580
- {{cssxref('easing-function')}}
581+
- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module
581582
- JavaScript {{domxref("AnimationEvent")}} API
582583
- [Cubic bézier generation tool](https://cubic-bezier.com/)
583584
- Other related animation properties: {{cssxref("animation")}}, {{cssxref("animation-composition")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timeline")}}

‎files/en-us/web/css/css_easing_functions/index.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: CSS easing functions
3+
slug: Web/CSS/CSS_easing_functions
4+
page-type: css-module
5+
spec-urls: https://drafts.csswg.org/css-easing-2
6+
sidebar: cssref
7+
---
8+
9+
The **CSS easing functions** module defines easing functions, which provide a means to control the transformation of values. The functions defined include linear, cubic bezier, and step easing functions. These easing functions can be applied to animations and transitions.
10+
11+
Gradually increasing the speed at which an element moves can give the element a sense of weight as it appears to gather momentum. Easing functions enable you to control the rate of change. Cubic bezier easing functions can be used to produce intuitive user interface elements or convincing cartoon props that behave like their physical counterparts.
12+
13+
Alternatively, you may want an animation to move forward in distinct steps, to create robot-like movement, or the effect of a segmented wheel that rotates such that the segments always appear in the same position. For this, step easing functions can be used.
14+
15+
## Reference
16+
17+
### Functions
18+
19+
- {{cssxref("easing-function/cubic-bezier", "cubic-bezier()")}}
20+
- {{cssxref("easing-function/linear", "linear()")}}
21+
- {{cssxref("easing-function/steps", "steps()")}}
22+
23+
### data types
24+
25+
- {{cssxref("easing-function")}}
26+
- [`<linear-easing-function>`](/en-US/docs/Web/CSS/easing-function#linear-easing-function)
27+
- [`<cubic-bezier-easing-function>`](/en-US/docs/Web/CSS/easing-function#cubic-bezier-easing-function)
28+
- [`<step-easing-function>`](/en-US/docs/Web/CSS/easing-function#step-easing-function)
29+
30+
### Terms and glossary definitions
31+
32+
- {{glossary("Bézier curve")}}
33+
- {{glossary("Interpolation")}}
34+
35+
## Guides
36+
37+
- [CSS value functions: easing functions](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions#easing_functions)
38+
- : The CSS statements that invoke special data processing or calculations to return a CSS value for a CSS property.
39+
40+
## Related concepts
41+
42+
- [CSS animations](/en-US/docs/Web/CSS/CSS_animations) module
43+
- {{cssxref("animation-timing-function")}}
44+
- {{cssxref("animation")}} shorthand
45+
46+
- [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions) module
47+
- {{cssxref("transition-timing-function")}}
48+
- {{cssxref("transition")}} shorthand
49+
50+
## Specifications
51+
52+
{{Specifications}}
53+
54+
## See also
55+
56+
- [CSS value functions](/en-US/docs/Web/CSS/CSS_values_and_units/CSS_value_functions)
57+
- {{cssxref("will-change")}} CSS property

‎files/en-us/web/css/easing-function/cubic-bezier/index.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,4 +141,5 @@ cubic-bezier(-1.9, 0.3, -0.2, 2.1)
141141
## See also
142142

143143
- Other easing functions: {{cssxref("easing-function/linear", "linear()")}} and {{cssxref("easing-function/steps", "steps()")}}
144-
- [cubic-bezier.com](https://cubic-bezier.com/) by Lea Verou (2011)
144+
- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module
145+
- [cubic-bezier.com](https://cubic-bezier.com/) by Lea Verou

‎files/en-us/web/css/easing-function/index.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,8 @@ selectElem.addEventListener("change", () => {
216216

217217
## See also
218218

219-
- [CSS animations](/en-US/docs/Web/CSS/CSS_animations)
220-
- [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions)
221-
- [cubic-bezier.com](https://cubic-bezier.com/) by Lea Verou (2011)
219+
- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module
220+
- [CSS animations](/en-US/docs/Web/CSS/CSS_animations) module
221+
- [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions) module
222222
- [`linear()` easing generator](https://linear-easing-generator.netlify.app/) by Jake Archibald
223+
- [cubic-bezier.com](https://cubic-bezier.com/) by Lea Verou

‎files/en-us/web/css/easing-function/linear/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,4 +93,5 @@ linear(start, middle, end)
9393
## See also
9494

9595
- Other easing functions: {{cssxref("easing-function/cubic-bezier", "cubic-bezier()")}} and {{cssxref("easing-function/steps", "steps()")}}
96+
- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module
9697
- [`linear()` easing generator](https://linear-easing-generator.netlify.app/) by Jake Archibald

‎files/en-us/web/css/easing-function/steps/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,4 +107,5 @@ steps(0, jump-none)
107107
## See also
108108

109109
- Other easing functions: {{cssxref("easing-function/cubic-bezier", "cubic-bezier()")}} and {{cssxref("easing-function/linear", "linear()")}}
110+
- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module
110111
- [Step function](https://en.wikipedia.org/wiki/Step_function) on Wikipedia

‎files/en-us/web/css/transition-timing-function/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,7 @@ const intervalID = setInterval(updateTransition, 10000);
299299

300300
- [Using CSS transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)
301301
- [`<easing-function>`](/en-US/docs/Web/CSS/easing-function)
302+
- [CSS easing functions](/en-US/docs/Web/CSS/CSS_easing_functions) module
302303
- {{cssxref('transition')}}
303304
- {{cssxref('transition-property')}}
304305
- {{cssxref('transition-duration')}}

0 commit comments

Comments
 (0)