Skip to content

Commit 901356b

Browse files
SebastianZsvgeesus
authored andcommitted
[css-color-4] Reverted the replacement of "animation" by "interpolation"
1 parent fbbfcf9 commit 901356b

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

css-color-4/Overview.bs

+10-10
Original file line numberDiff line numberDiff line change
@@ -1085,12 +1085,12 @@ any achromatic color will have a [=powerless=] hue component.
10851085
to achieve an effect where you only <em>want</em>
10861086
to interpolate certain components of a color.
10871087

1088-
For example, to interpolate a color to "grayscale", no matter what the color is,
1088+
For example, to animate a color to "grayscale", no matter what the color is,
10891089
one can interpolate it with ''oklch(none 0 none)''.
10901090
This will take the hue and lightness from the starting color,
1091-
but interpolate its chroma down to 0,
1091+
but animate its chroma down to 0,
10921092
rendering it into an equal-lightness gray
1093-
with a steady hue across the whole interpolation.
1093+
with a steady hue across the whole animation.
10941094

10951095
Doing this manually would require
10961096
matching the hue and lightness of the starting color explicitly.
@@ -4972,7 +4972,7 @@ Hue Interpolation</h3>
49724972
<span class="swatch" style="--color: rgb(87.66% 51.96% 0%)"></span>&nbsp;oklch(0.7 0.195 60)
49734973
</div>
49744974

4975-
Interpolated angles are adjusted so that |θ₂ - θ₁| ∈ [-180, 180]. In pseudo-Javascript:
4975+
Angles are adjusted so that |θ₂ - θ₁| ∈ [-180, 180]. In pseudo-Javascript:
49764976
<pre>
49774977
if (θ₂ - θ₁ > 180) {
49784978
θ₁ += 360;
@@ -5019,7 +5019,7 @@ Hue Interpolation</h3>
50195019

50205020
Depending on the difference between the two angles,
50215021
this will either look the same as <em>shorter</em> or as <em>longer.</em>
5022-
However, if one of the hue angles is being interpolated,
5022+
However, if one of the hue angles is being animated,
50235023
and the hue angle difference passes through 180 degrees,
50245024
the interpolation will not flip to the other arc.
50255025

@@ -5031,13 +5031,13 @@ Hue Interpolation</h3>
50315031
giving a khaki
50325032
<span class="swatch" style="--color: rgb(51.73% 52.26% 22.03%)"></span>&nbsp;oklch(0.6 0.1 110).
50335033

5034-
However, if the hue of the second color is interpolated to
5034+
However, if the hue of the second color is animated to
50355035
<span class="swatch" style="--color: rgb(33.09% 66.63% 81.81%)"></span>&nbsp;oklch(0.7 0.1 230),
50365036
the midpoint of the interpolation will be (30 + 230) * 0.5 = 130 degrees,
50375037
continuing in the same increasing direction,
50385038
giving another green
50395039
<span class="swatch" style="--color: rgb(42.44% 54.95% 28.93%)"></span>&nbsp;oklch(0.6 0.1 130)
5040-
rather than flipping to the opponent color part-way through the interpolation.
5040+
rather than flipping to the opponent color part-way through the animation.
50415041
</div>
50425042

50435043
Angles are adjusted so that |θ₂ - θ₁| ∈ [0, 360). In pseudo-Javascript:
@@ -5058,7 +5058,7 @@ Hue Interpolation</h3>
50585058

50595059
Depending on the difference between the two angles,
50605060
this will either look the same as <em>shorter</em> or as <em>longer.</em>
5061-
However, if one of the hue angles is being interpolated,
5061+
However, if one of the hue angles is being animated,
50625062
and the hue angle difference passes through 180 degrees,
50635063
the interpolation will not flip to the other arc.
50645064

@@ -5070,13 +5070,13 @@ Hue Interpolation</h3>
50705070
giving a purple
50715071
<span class="swatch" style="--color: rgb(49.98% 46.03% 72.08%)"></span>&nbsp;oklch(0.6 0.1 290).
50725072

5073-
However, if the hue of the second color is interpolated to
5073+
However, if the hue of the second color is animated to
50745074
<span class="swatch" style="--color: rgb(33.09% 66.63% 81.81%)"></span>&nbsp;oklch(0.7 0.1 230),
50755075
the midpoint of the interpolation will be (30 + 360 + 230) * 0.5 = 310 degrees,
50765076
continuing in the same decreasing direction,
50775077
giving another purple
50785078
<span class="swatch" style="--color: rgb(57.47% 43.44% 67.8%)"></span>&nbsp;oklch(0.6 0.1 310)
5079-
rather than flipping to the opponent color part-way through the interpolation.
5079+
rather than flipping to the opponent color part-way through the animation.
50805080
</div>
50815081

50825082
Angles are adjusted so that |θ₂ - θ₁| ∈ (-360, 0]. In pseudo-Javascript:

0 commit comments

Comments
 (0)