CSS渐变过渡动画的解决方案

你是否试过以下方式？

.box{
	background:linear-gradient(45deg,#00A6FF,#FF00DD);transition:all 1s;
}

.box:hover{
	background:linear-gradient(45deg,#FFC300,#00B578);
}

但并不起作用，根本没有过渡动画效果。这时我们需要用到css新特性@property，@property是一个新增的CSS @规则(CSS at-rule)，它是CSS Houdini API的一部分, 它允许开发者显式地定义css自定义属性，并允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。@property可以直接在样式表中注册自定义属性，无需运行任何JS代码；同时也配备相应的JS语法注册自定义属性。@property自定义属性，是CSS变量(CSS variables)声明变量的升级版本，比CSS变量更加规范和严谨。

用@property解决渐变过渡动画无效的方法

示例：

<style>
      @property --my-color {
        syntax: '<color>';
        initial-value: red;
        inherits: false;
      }
      @property --color-2{
        syntax: '<color>';
          initial-value: blue;
          inherits: false;
      }

      .box {
        width: 400px;
        height: 60px;
        --color-2:#c83432;
        --my-color: #c0ffee;
        background: linear-gradient(to right, var(--color-2), var(--my-color));
        transition: --my-color 1s ease-in-out,--color-2 1s;
      }
   
      .box:hover {
        --my-color: auto;
        --color-2:green;
      }


 </style>
 <div class="box "></div>

鼠标移到上面试试