From 4b600e6fa6ccae366aa6c885240f60b748c05c05 Mon Sep 17 00:00:00 2001 From: jimmonte <33158815+jimmonte@users.noreply.github.com> Date: Fri, 16 Feb 2024 10:47:33 -0500 Subject: [PATCH] Fixed examples in linear easing function description (#32001) * Fixed examples in linear easing function The examples had the animation progress and duration reversed. Since which of these is which can get confusing, a specific case of 100 pixels and 100 seconds was used for additional clarification. * clarified meaning of animation time animation time -> animation duration time to explicitly distinguish from animation-delay and also to help make the connection between duration and time when duration is mentioned elsewhere. --- files/en-us/web/css/easing-function/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/easing-function/index.md b/files/en-us/web/css/easing-function/index.md index 7c0d20325bfced1..81c8a1ef2af21ea 100644 --- a/files/en-us/web/css/easing-function/index.md +++ b/files/en-us/web/css/easing-function/index.md @@ -105,13 +105,13 @@ There are three types of easing functions: The `linear()` function creates a piecewise linear easing, allowing the approximation of complex animations and transitions by interpolating linearly between the specified points. The interpolation occurs at a constant rate from beginning to end. A typical use of the `linear()` function is to provide many points to approximate any curve. -For example, the `linear(0, 0.25, 1)` function defines the linear stops at `0`, `0.25`, and `1`. The animation or transition starts at point `0`, moves linearly to `0.25`, and then continues linearly to point `1`. Since no `` percentage is specified, the same duration (50%) is used to go from `0` to `0.25` and from `0.25` to `1`. +For example, the `linear(0, 0.25, 1)` function has linear stops of `0`, `0.25`, and `1` as arguments. The animation or transition starts at point `0`, moves linearly to `0.25`, and then continues linearly to point `1`. Since no `` percentage is specified, the same duration (50%) is used to go from `0` to `0.25` and from `0.25` to `1`. ![Graphs of "Input progress" to "Output progress", of which "linear(0, 0.25, 1)" shows a broken line connecting the origin, (0.5, 0.25), and (1, 1); and "linear(0, 0.25 75%, 1)" shows a broken line connecting the origin, (0.75, 0.25), and (1, 1).](linear_function.svg) By default, the stops are equidistant. So if there are 5 stops, they will be at 0%, 25%, 50%, 75%, and 100% of the duration. You can use optional `` percentage values to provide finer control, defining the start and/or length of each segment, allowing for a more controlled progression of the transition. -Let's look at an example where the progress of the animation is specified: `linear(0, 0.25 75%, 1)`. In this case, the animation progresses to `75%` of its total change in the first 25% of the duration (that is, to go from the timeline point `0` to `0.25`). The last 25% of the animation's total change is used during the remaining 75% of the duration (that is, to progress from the timeline point `0.25` to `1`). Consider another example of the `linear()` function: `linear(0.5 25% 75%, 1)`. Here, the animation reaches `25%` of its total change at the halfway point (`0.5`), and then instantly jumps to `75%` of its total change. Over the remaining 50% of the duration (`0.5` to `1`), it progresses from `75%` of its total change to 100%. +Consider an animation with a duration time of 100 seconds and a change of 100 pixels. Let's look at an example where the easing of the animation is specified: `linear(0, 0.25 75%, 1)`. In this case, the animation progresses to 25 pixels (25% of its total change) in the first 75 seconds (75% of the duration). The last 75 pixels are applied in the remaining 25 seconds of the animation. For the same animation, suppose the easing function is given instead as `linear(0, 0.5 25% 75%, 1)`. Here, the animation reaches 50 pixels (50% of its total change) in 25 seconds (25% of the duration) and remains there for 50 seconds (75% - 25% of the duration). Then the last 50 pixels are applied in the remaining 25 seconds of the duration. Note that `linear(0, 0.5 25% 75%, 1)` is equivalent to `linear(0, 0.5 25%, 0.5 75%, 1)`. > **Note:** The [`linear`](#linear) keyword is equivalent to the easing function `linear(0, 1)`. While the `linear` keyword is always interpreted as-is, the function `linear(0, 1)` gets interpreted as `linear(0 0%, 1 100%)`.