[css-images-4] Animations should be allowed on linear/radial gradients #3783

SetTrend · 2019-04-01T01:12:22Z

CSS animations should explicitly allow animated linear-gradient() and radial-gradient() backgrounds.

If all <keyframe-selector>s of an animation yield computed background values sharing the same set of properties:

either linear-gradient(), radial-gradient, repeating-linear-gradient() or repeating-radial-gradient()
same number of <color-stop> values

Then animation should take place in the form that the <color-stop> values should get animated over time.

Internet Explorer and Microsoft Edge already implement this behaviour:

Sample Code

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      div {
        margin: 1em;
      }

      @keyframes movement1 {
        from {
          background: linear-gradient(to right, white, white 0%, #aaf 0%, white 2%, white);
        }

        25% {
          background: linear-gradient(to right, white, white 25%, #aaf 50%, white 52%, white);
        }

        50% {
          background: linear-gradient(to right, white, white 98%, #aaf 99%, white 100%, white);
        }

        75% {
          background: linear-gradient(to right, white, white 48%, #aaf 50%, white 75%, white);
        }

        to {
          background: linear-gradient(to right, white, white 0%, #aaf 1%, white 2%, white);
        }
      }

      @keyframes movement2 {
        from {
          background: radial-gradient(circle closest-side at center, #aaf, white, white);
        }

        50% {
          background: radial-gradient(circle closest-side at center, white, #aaf, white);
        }

        to {
          background: radial-gradient(circle closest-side at center, white, white, white);
        }
      }

      input[type="text"]#i1 {
        animation: 2s linear alternate infinite movement1;
        border: 1px solid silver;
        border-radius: .5ex;
      }

      input[type="text"]#i2 {
        animation: 2s linear alternate infinite movement2;
        border: 1px solid silver;
        border-radius: .5ex;
      }
    </style>
  </head>

  <body>
    <div>
      <input type="text" id="i1" />
    </div>
    <div>
      <input type="text" id="i2" />
    </div>
  </body>

</html>

The text was updated successfully, but these errors were encountered:

AmeliaBR · 2019-04-01T01:39:35Z

Hi @SetTrend. I think everyone in the working group agrees with you that this should be possible. The problem is that there are a lot of little details that still need to be sorted out.

The relevant specification is CSS Images Level 4. It was initially described in Level 3, but got pushed back because browser implementations weren't always consistent. (For a while, Chrome also supported some gradient animations.) Also, the current definition relies on falling back to cross-fade() animations if the gradients don't match up nicely, and no browsers yet support cross-fade().

So, what can you do?

Take a look at the current spec text & file issues if you have any suggestions or concerns.
File or upvote issues on the browser engines asking them to implement experimental versions of gradient interpolation as defined in CSS Images 4, so that we can get feedback and figure out the missing spec details.

SetTrend · 2019-04-01T12:42:49Z

Hi @AmeliaBR ,

thanks for replying.

I couldn't find corresponding issues yet, so I created two issues now, both back-referencing this issue:

Anyone who's interested, please upvote there and here.

SetTrend · 2019-04-01T22:48:51Z

Just let me add an example depicting that IE and MS Edge even interpolate angle and color of linear gradients:

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			div
			{
				margin: 1em;
			}

			@keyframes movement1
			{
				from
				{
					background: linear-gradient(0deg, white, white 0%, #aaf 0%, white 2%, white);
				}

				25%
				{
					background: linear-gradient(90deg, white, white 25%, red 50%, white 52%, white);
				}

				50%
				{
					background: linear-gradient(180deg, white, white 98%, #aaf 99%, white 100%, white);
				}

				75%
				{
					background: linear-gradient(90deg, white, white 48%, purple 50%, white 75%, white);
				}

				to
				{
					background: linear-gradient(0deg, white, white 0%, #aaf 1%, white 2%, white);
				}
			}
			input[type="text"]#i1
			{
				animation: 2s linear infinite movement1;
				border: 1px solid silver;
				border-radius: .5ex;
			}
		</style>
	</head>

	<body>
		<div>
			<input type="text" id="i1" />
		</div>
	</body>

</html>

stephenmcgruer · 2019-07-10T11:12:58Z

As a drive-by note, the css-background spec actually doesn't allow interpolation of background-images - it is defined as discretely interpolated.

See #578 where alancutter long ago tried to get some attention to this.

Chrome violates this for url() (see the 'background-image' line of the WPT test results, but we'd really rather not be violating the spec (either by removing it from Chrome or spec-ing interpolation in background-image)

SetTrend · 2019-07-10T21:33:22Z

@stephenmcgruer:

This issue is in fact about amending the spec to allow animations on gradients, which can be interpolated fine.

I couldn't think of any kinf of animation on background-images (i.e. discrete image files) other than fading.

stephenmcgruer · 2019-07-29T15:12:46Z

Right, but a <gradient> is an image type (unless I'm badly mistaken!). As such, in the examples which use background: linear-gradient(...) are actually equivalent to using background-image: linear-gradient(...).

What I was pointing out is that now matter how we spec interpolation of gradients, unless we fix #578 we will not be able to interpolate the background-image property (and thus gradients in background-image) by spec.

AmeliaBR · 2019-07-29T15:19:16Z

Under the new definition of "animatable", background-image is animatable, but as a discrete value. If we introduce a way for certain types of images to animate continuously, yes, that would need to be updated.

SetTrend · 2019-07-29T15:43:58Z

Wouldn't this (I'm quoting your phrase now) "certain type of image" be a vector image in contrast to raster images?

Probably only a certain fraction of vector images may be able to get morphed - vector images sharing the same number of primitives, for instance.

There are algorithms available that morph different primitive shapes into each other. A circle, for instance, can be morphed into a hexagon. I guess the same applies to fill/pen brushes, too (as we can see from the Internet Explorer rendering above).

AmeliaBR added the css-images-4 label Apr 1, 2019

birtles changed the title ~~[css-animations] Animations should be allowed on linear/radial gradients~~ [css-images-4] Animations should be allowed on linear/radial gradients Jul 11, 2019

SebastianZ mentioned this issue Apr 20, 2020

[css-backgrounds] background-image should be animatable #578

Open

samhenrigold mentioned this issue Jul 22, 2021

New Want: I want gradients to be animatable WebWeWant/webwewant.fyi#430

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-images-4] Animations should be allowed on linear/radial gradients #3783

[css-images-4] Animations should be allowed on linear/radial gradients #3783

SetTrend commented Apr 1, 2019

AmeliaBR commented Apr 1, 2019

SetTrend commented Apr 1, 2019

SetTrend commented Apr 1, 2019

stephenmcgruer commented Jul 10, 2019 •

edited

Loading

SetTrend commented Jul 10, 2019

stephenmcgruer commented Jul 29, 2019

AmeliaBR commented Jul 29, 2019

SetTrend commented Jul 29, 2019 •

edited

Loading

[css-images-4] Animations should be allowed on linear/radial gradients #3783

[css-images-4] Animations should be allowed on linear/radial gradients #3783

Comments

SetTrend commented Apr 1, 2019

Sample Code

AmeliaBR commented Apr 1, 2019

SetTrend commented Apr 1, 2019

SetTrend commented Apr 1, 2019

stephenmcgruer commented Jul 10, 2019 • edited Loading

SetTrend commented Jul 10, 2019

stephenmcgruer commented Jul 29, 2019

AmeliaBR commented Jul 29, 2019

SetTrend commented Jul 29, 2019 • edited Loading

stephenmcgruer commented Jul 10, 2019 •

edited

Loading

SetTrend commented Jul 29, 2019 •

edited

Loading