到目前为止，CSS的渐变属性linear-gradient和radial-gradient已经是很成熟的CSS特性了，而且repeating-linear-gradient和conic-gradient也越来越成熟。CSS渐变特性对于我们的帮助已经非常强大了，它们可以帮助我们绘图、创建图片占位符、制作环形进度条等等。另外还可以通过transition和animation让渐变动起来。
但是给渐变添加动画效果目前还有很多极限性，如果不添加额外的元素或其他的渐变属性，有些效果是无法实现的，比如下面这个效果。
不过，在Edge浏览器，使用@keyframes就可以实现上图的效果，而且代码很简单：
html {
background: linear-gradient(90deg, #f90 0%, #444 0) 50%/ 5em;
animation: blinds 1s ease-in-out infinite alternate;
}
@keyframes blinds {
to {
background-image: linear-gradient(90deg, #f90 100%, #444 0);
}
}
在些基础上，借助CSS的处理器，比如Sass，可以让上面的代码变得更为灵活：
@function blinds($open: 0) {
@return linear-gradient(90deg, #f90 $open*100%, #444 0);
}
html {
background: blinds() 50%/ 5em;
animation: blinds 1s ease-in-out infinite alternate;
}
@keyframes blinds {
to {
background-image: blinds(1)
}
}
虽然上面的代码实现了所需的效果，但使用CSS来维护和使用仍然还是需要编写代码，这是事实。动画效果也只是停留在0%到100%之间，能达到我们所要的效果。不过，要是使用0或0px来替代0%的话，结果就会令人失望，动画效果失踪了。更不用说在Chrome和Firefox浏览器上了，能看到的仅仅就是#f90到#444两个颜色之间的切换，根本没有停止位置的动效。
庆幸折是，现在我们有一个更好的选择：
虽然我们可以获得过transition效果(但不是animation效果)，但是如果我们使用的属性是可动画化的，那么CSS自定义属性是不可动画化。比如，当在transfrom中使用时，我们可以在transition中使用transfrom属性。
让我们来做一个效果，复选框选中时，橙色正方形(.box)将会移动并且会被压扁的效果。我们在.box中定义了一个自定义属性--f，并且初始值设置为1：
.box {
--f: 1;
transform: translate(calc((1 - var(--f)) * 100vw)) scalex(var(--f));
}
当复选框被选中时:checked，.box的自定义属性--f的值变成.5：
:checked ~ .box {
--f: .5
}
在.box中添加transition属性，我们可以让.box从一个状态到另一个状态时，整个过程是一种细腻的滑动效果。
.box {
--f: 1;
transform: translate(calc((1 - var(--f)) * 100vw)) scalex(var(--f));
transition: transform .3s ease-in;
}
然而，CSS渐变是background-image，它只在Edge和IE10+中是可动画化的。因此，虽然我们可以让事情变得简单，并减少为transition生成的CSS代码量(如下面的代码所示)，但是在扩展支持方面，一依没有取得任何进展。
.blinds {
background: linear-gradient(90deg, #f90 var(--pos, 0%), #444 0) 50%/ 5em;
transition: .3s ease-in-out;
:checked ~ & {
--pos: 100%;
}
}
值得我们庆幸的是，CSS Houdini的诞生，它允许我们注册自定义属性，然后让它们动起来。不过有点遗憾的是，目前这项强大的特性还只是实验性的特性，如果你想在浏览器中看到相应的效果，需要在实验Web平台特性标志(Experimental Web Platform features)中开启相应的特性。
接着回到我们的示例中来。先注册一个--pos自定义属性：
CSS.registerProperty({
name: '--pos',
syntax: '',
initialValue: '0%',
inherits: true
});
注意了。 这里syntax设置了，也就意味着它不仅接受长度和百分比值，还接受它们的calc()组合。相比之下， | 只接受长度和百分比值，而不接受它们的calc()组合。同时显式的指定了inherits(继承)是强制性的。
但这样做，在Chrome浏览器下依旧没有任何的效果，这可能是因为，在transition示例中，transition是属性，其值依赖于CSS自定义属性，而不是CSS自定义属性本身。众所周知，到目前为止，Chrome浏览器还不支持两个背景图片之间的transition效果。就这方面而言，Edge显得更为强大，就算是不注册自定义属性--pos，在Edge可以正常的工作。那是因为在Edge中允许我们在transition属性中运用渐变属性，从而实现两个渐变之间的过渡效果。
如果在Blink内核浏览器中，开启了实验性Web特性，就可以使用animation来替代transition属性。
html {
background: linear-gradient(90deg, #f90 var(--pos, 0%), #444 0) 50%/ 5em;
animation: blinds .85s ease-in-out infinite alternate;
}
@keyframes blinds {
to {
--pos: 100%;
}
}
这样一样，在Edge中又没有效果了，因为到现在为止Edge并不支持CSS自定义属性。因此，需要另外一种方法来处理。这个时候我们应该想起CSS的@supports，该他出场的时候到了。可以借助@supports来做一个条件判断：
@function grad($pos: 100%) {
@return linear-gradient(90deg, #f90 $pos, #444 0);
}
html{
background: linear-gradient(90deg, #f90 var(--pos, 0%), #444 0) 50%/ 5em;
animation: blinds .85s ease-in-out infinite alternate;
@supports (-ms-user-select: none) {
background-image: grad(0%);
animation-name: blinds-alt;
}
}
@keyframes blinds-alt {
to {
background-image: grad()
}
}
这种方式并不是唯一的方式。我们可以对渐变的角度做同样的处理。它背后的原理可以说几乎是一样的，只是现在我们的动画不再是一个交替的，不过我们可以在动画中尝试使用easeInOutBack。
@function grad($ang: 1turn) {
@return linear-gradient($ang, #f90 50%, #444 0);
}
html {
background: grad(var(--ang, 0deg));
animation: rot 2s cubic-bezier(.68, -.57, .26, 1.65) infinite;
@supports (-ms-user-select: none) {
background-image: grad(0turn);
animation-name: rot-alt;
}
}
@keyframes rot {
to {
--ang: 1turn;
}
}
@keyframes rot-alt {
to {
background-image: grad();
}
}
请记住，就像在停止位置的情况一样，我们只能在相同角度单位之间的渐变进行动画，所以在Sass中从grad(0deg)用grad(0turn)替代是无法正常工作的。
当然，我们现在使用的CSS自定义属性来接受角度值，而不是长度和百分比：
CSS.registerProperty({
name: '--ang',
syntax: '',
initialValue: '0deg',
inherits: true
});
以类似的方式，也可以把这个原理运用于径向渐变。
$p: 9%;
html {
--x: #{$p};
--y: #{$p};
background: radial-gradient(circle at var(--x) var(--y), #f90, #444 $p);
}
这里我们注册了两个自定义属性--x和--y：
CSS.registerProperty({
name: '--x',
syntax: '',
initialValue: '0%',
inherits: true
});
CSS.registerProperty({
name: '--y',
syntax: '',
initialValue: '0%',
inherits: true
});
运用于动画如下：
$p: 9%;
html {
--x: #{$p};
--y: #{$p};
background: radial-gradient(circle at var(--x) var(--y), #f90, #444 $p);
animation: a 0s ease-in-out -2.3s alternate infinite;
animation-name: x, y;
animation-duration: 4.1s, 2.9s;
}
@keyframes x {
to {
--x: #{100% - $p}
}
}
@keyframes y {
to {
--y: #{100% - $p}
}
}
得到的效果如下：
我们可以使用这种技术，在渐变中使用不同的自定义属性，实现相应的动画效果。比如，我们要实现文章开头那种百叶窗的动效，我们可以引入另外两个自定义CSS属性：--c0和--c1：
$c: #f90 #444;
html {
--c0: #{nth($c, 1)};
--c1: #{nth($c, 2)};
background: linear-gradient(90deg, var(--c0) var(--pos, 0%), var(--c1) 0) 50%/ 5em;
}
同样的注册需要的自定义属性：
CSS.registerProperty({
name: '--pos',
syntax: '',
initialValue: '0%',
inherits: true
});
CSS.registerProperty({
name: '--c0',
syntax: '',
initialValue: '#f90',
inherits: true
});
CSS.registerProperty({
name: '--c0',
syntax: '',
initialValue: '#444',
inherits: true
});
对于第一个停止位置，我们使用与之前动画中相同的自定义属性--pos，除此之外，我们为另外两个自定义属性引入动画的两个steps()中，每次完成第一个动画的迭代(改变--pos值):
$t: 1s;
html {
/* 和前面代码相同 */
animation: a 0s infinite;
animation-name: c0, pos, c1;
animation-duration: 2*$t, $t;
animation-timing-function: steps(1), ease-in-out;
}
@keyframes pos {
to {
--pos: 100%;
}
}
@keyframes c0 {
50% {
--c0: #{nth($c, 2)}
}
}
@keyframes c1 {
50% {
--c1: #{nth($c, 1)}
}
}
得到的效果如下：
我们还可以将此应用到radial-gradient()中：
background: radial-gradient(circle, var(--c0) var(--pos, 0%), var(--c1) 0);
同样也可以运用于conic-gradient()：
background: conic-gradient(var(--c0) var(--pos, 0%), var(--c1) 0);
如果在重复渐变(repeating-radial-gradient)中使用的话，可以得到一个类似水波涟漪的效果：
$p: 2em;
html {
/* 和前面代码相同 */
background: repeating-radial-gradient(circle, var(--c0) 0 var(--pos, 0px), var(--c1) 0 $p);
}
@keyframes pos {
90%, 100% {
--pos: #{$p}
}
}
得到的效果如下：
如果运用在重复圆锥属性上，还可以绘制一些螺族或射线的动效：
$p: 5%;
html {
/* 和前面的代码相同 */
background: repeating-conic-gradient(var(--c0) 0 var(--pos, 0%), var(--c1) 0 $p);
}
@keyframes pos {
90%, 100% {
--pos: #{$p}
}
}
我们还可以添加其他的CSS自定义属性，让动效变得更有意思：
$n: 20;
html {
/* 和前面代码相同 */
background: radial-gradient(circle at var(--o, 50% 50%), var(--c0) var(--pos, 0%), var(--c1) 0);
animation: a 0s infinite;
animation-name: c0, o, pos, c1;
animation-duration: 2*$t, $n*$t, $t;
animation-timing-function: steps(1), steps(1), ease-in-out;
}
@keyframes o {
@for $i from 0 to $n {
#{$i*100%/$n} {
--o: #{random(100)*1%} #{random(100)*1%}
}
}
}
同样的方式注册新增加的自定义属性：
CSS.registerProperty({
name: '--o',
syntax: '+',
initialValue: '50%',
inherits: true
});
效果如下：
我认为使用@keyframes动画改变渐变的效果看起来很酷。但与此同时，对于跨浏览器的解决方案，JavaScript方案仍然是一个有效的方法。
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
