W3C home > Mailing lists > Public > public-css-archive@w3.org > April 2019

Re: [csswg-drafts] [css-animations] Animations should be allowed on linear/radial gradients (#3783)

From: Axel D. via GitHub <sysbot+gh@w3.org>
Date: Mon, 01 Apr 2019 22:48:53 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-478774866-1554158931-sysbot+gh@w3.org>
Just let me add an example depicting that IE and MS Edge even interpolate angle and color of linear gradients:

![Throbber](https://user-images.githubusercontent.com/9283914/55364358-a5a56c00-54e0-11e9-8fa0-38868d0e65c0.gif)

```html
<!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>
```

-- 
GitHub Notification of comment by SetTrend
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3783#issuecomment-478774866 using your GitHub account
Received on Monday, 1 April 2019 22:48:54 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:31:06 UTC