[css-images-4] Animations should be allowed on linear/radial gradients
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
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>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the CSS Images 4 specification area and the sample HTML in this issue. Compare the requested gradient-animation conditions with the existing specification, then define the needed normative text and examples. Done means the draft clearly specifies interpolation for matching gradient functions with the same number of color stops.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 30/100