[css-images-4] Animations should be allowed on linear/radial gradients #3783
Description
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()orrepeating-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>