CSS自定义属性实现过渡效果

注册自定义属性

JavaScriptCSS.registerProperty()
可以定义属性的名称,语法,默认值,是否可继承

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: '#f2f3f4',
});

CSS中使用@property
和上面的接口类似

@property --my-color {
  syntax: '<color>';
  initial-value:'#f2f3f4';
  inherits: false;
}

使用自定义属性实现的过渡效果

元素的background-image值为渐变的时候,不支持过渡效果

.el {
  background: linear-gradient(white, black);
  transition: 1s;
}
.el:hover {
  background: linear-gradient(red, black);
}

自定义属性设置为<color>,可以支持过渡

@property --gradient-start {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

.el {
  --gradient-start: white;
  background: linear-gradient(var(--gradient-start), black);
  transition: --gradient-start 1s;
}

.el:hover {
  --gradient-start: red;
}

参考
@property | CSS-Tricks
几种CSS渐变背景图片transtion动画方法 « 张鑫旭-鑫空间-鑫生活

文字内容的过渡

@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

div {
  transition: --num 1s;
  counter-reset: num var(--num);
}
div:hover {
  --num: 10000;
}
div::after {
  content: counter(num);
}

参考
Animating Number Counters | CSS-Tricks

兼容性

Comments
Write a Comment