-
Notifications
You must be signed in to change notification settings - Fork 759
[css-easing-2] linear() custom easing #7484
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit
Hold shift + click to select a range
b4bad72
Calculating progress & serialising linear-spline
jakearchibald 1c326ef
Define function creation
jakearchibald 1e5b11d
Update largest number when inferring 0 for the first item
jakearchibald a4c01be
Simplify serialisation
jakearchibald 8276f40
Spec tidy up
jakearchibald 0e5043f
Connecting parsing and serialising
jakearchibald f621932
Fix indenting
jakearchibald ef29eae
Dark mode figures
jakearchibald 2739467
Merge remote-tracking branch 'origin/main' into css-easing-2-linear-s…
jakearchibald 05473a9
Markdown headings
jakearchibald f3c7508
Switch back to linear()
jakearchibald 973a84a
Missed a few old spline references
jakearchibald c6fe005
Examples
jakearchibald c51794a
Existing examples are good enough IMO
jakearchibald 8e38422
Forgot to specify 'index'
jakearchibald 8fbc910
Missing comma
jakearchibald 5221e11
Adding serialization examples
jakearchibald 589a383
Be more specific about the linear keyword
jakearchibald ce4c5d1
A little more specific about the serialization of linear()
jakearchibald 932ce07
Apply suggestions from code review
jakearchibald a509029
Fixes following review
jakearchibald d75bd5c
Clarify note
jakearchibald bdbb745
Make all graphs transparent
jakearchibald 17e0ad3
One more
jakearchibald 8ee8bf2
Move examples after normative text
jakearchibald File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Fixes following review
- Loading branch information
commit a50902947a1a4012a25d1b697d84bf5a0453c08a
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,6 +13,7 @@ Editor: Dean Jackson, Apple Inc https://www.apple.com/, dino@apple.com, w3cid 42 | |
| Editor: Matt Rakow, Microsoft, w3cid 62267 | ||
| Former Editor: Shane Stephens, Google, shans@google.com, w3cid 47691 | ||
| Markup Shorthands: markdown yes | ||
| Indent: 2 | ||
|
|
||
jakearchibald marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| Abstract: This CSS module describes a way for authors to define a transformation | ||
| that controls the rate of change of some value. | ||
|
|
@@ -137,7 +138,7 @@ The syntax for specifying an [=easing function=] is as follows: | |
| <div class=example> | ||
| ''linear()'' allows the definition of easing functions that interpolate linearly between a set of points. | ||
|
|
||
| For example, `linear(0, 0.25, 1)` produces an easing function | ||
| For example, ''linear(0, 0.25, 1)'' produces an easing function | ||
| that moves linearly from 0, to 0.25, then to 1: | ||
|
|
||
| <figure> | ||
|
|
@@ -151,7 +152,7 @@ The syntax for specifying an [=easing function=] is as follows: | |
|
|
||
| For example, ''linear(0, 0.25 75%, 1)'' produces the following easing function, | ||
| which spends 75% of the time transitioning from ''0'' to ''.25'', | ||
| then the last 25% transitiong from ''.25'' to ''1'': | ||
| then the last 25% transitioning from ''.25'' to ''1'': | ||
|
|
||
| <figure> | ||
| <img class="easing-graph" src="linear-with-input-example.svg" width="400" | ||
|
|
@@ -166,7 +167,8 @@ The syntax for specifying an [=easing function=] is as follows: | |
| If two input values are provided for a single output, | ||
| it results in two points with the same output. | ||
|
|
||
| For example, `linear(0, 0.25 25% 75%, 1)` is equivalent to `linear(0, 0.25 25%, 0.25 75%, 1)`, | ||
| For example, ''linear(0, 0.25 25% 75%, 1)'' | ||
| is equivalent to ''linear(0, 0.25 25%, 0.25 75%, 1)'', | ||
| producing the following easing function: | ||
|
|
||
| <figure> | ||
|
|
@@ -342,9 +344,9 @@ It returns a [=linear easing function=] or <i>failure</i>. | |
|
|
||
| For example: | ||
|
|
||
| - `linear(0, 0.25, 1)` serializes as `linear(0 0%, 0.25 50%, 1 100%)` | ||
| - `linear(0 20%, 0.5 10%, 1)` serializes as `linear(0 20%, 0.5 20%, 1 100%)` | ||
| - `linear(0, 0.25 25% 75%, 1)` serializes as `linear(0 0%, 0.25 25%, 0.25 75%, 1 100%)` | ||
| - ''linear(0, 0.25, 1)'' serializes as ''linear(0 0%, 0.25 50%, 1 100%)'' | ||
| - ''linear(0 20%, 0.5 10%, 1)'' serializes as ''linear(0 20%, 0.5 20%, 1 100%)'' | ||
| - ''linear(0, 0.25 25% 75%, 1)'' serializes as ''linear(0 0%, 0.25 25%, 0.25 75%, 1 100%)'' | ||
| </div> | ||
|
|
||
| <section algorithm="linear easing function"> | ||
|
|
@@ -439,7 +441,7 @@ meaning that its [=output progress value=] is equal to the | |
| [=input progress value=] for all inputs. | ||
|
|
||
| Note: Although this produces a [=linear easing function=], | ||
| it serializes as `linear`, | ||
| it serializes as ''linear'', | ||
| as per the rules in [Serialization](#serialization). | ||
|
||
|
|
||
| <h3 id=cubic-bezier-easing-functions oldids=cubic-bezier-timing-functions>Cubic | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.