CSS @property All In One

CSS @property All In One

demo

<div class="normal"></div>

<div class="property"></div>

html, body {
    width: 100%;
    height: 100%;
    display: flex;
}

div {
    width: 200px;
    height: 200px;
    margin: auto;
    cursor: pointer;
}

:root {
    --colorA: #fff;
    --colorB: #000;
}

.css-normal {
    background: linear-gradient(45deg, var(--colorA), var(--colorB));
    // transition: all 1s;
    // transition: 1s background;
    transition: 1s --colorA, 1s --colorB;
    &:hover {
        --colorA: yellowgreen;
        --colorB: deeppink;
    }
    // transition: 1s var(--colorA), 1s var(--colorB);
    // &:hover {
    //     var(--colorA): yellowgreen;
    //     var(--colorB): deeppink;
    // }
}

@property --houdini-colorA {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

@property --houdini-colorB {
  syntax: '<color>';
  inherits: false;
  initial-value: #000;
}

.css-property {
    background: linear-gradient(45deg, var(--houdini-colorA), var(--houdini-colorB));
    transition: 1s --houdini-colorA, 1s --houdini-colorB;
    &:hover {
        --houdini-colorA: yellowgreen;
        --houdini-colorB: deeppink;
    }
}

https://codepen.io/xgqfrms/pen/KKWdBBM?editors=0110

refs

https://developer.mozilla.org/en-US/docs/Web/CSS/@property
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@property

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---