使用CSS transition和animation改变渐变状态
source link: https://www.w3cplus.com/css/the-state-of-changing-gradients-with-css-transitions-and-animations.html?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
特别声明,本文根据 @ANA TUDOR 的《 The State of Changing Gradients with CSS Transitions and Animations 》一文所整理。
到目前为止,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
两个颜色之间的切换,根本没有停止位置的动效。
庆幸折是,现在我们有一个更好的选择: CSS自定义属性 !
虽然我们可以获得过 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; }
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK