css文本背景剪辑（webkit）上的交叉淡入淡出动画

Question

我正在使用此代码将背景图片叠加到h2上（留下白色背景）：

h2:hover {
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}

如果我尝试使用transition:5s all为其设置动画并将鼠标悬停在其上，则背景会立即切换为白色，文本的叠加层会逐渐淡入。有什么方法可以交叉淡化这两个事件（背景变为白色，背景覆盖文字）？

Answer 1

您可以使用逗号分隔过渡属性。

JSFiddle Demo

<强> HTML

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium maiores ipsum itaque labore laborum natus a deleniti harum repellat enim! Saepe ut asperiores eum velit!</p>
</div>

<强> CSS

div {
    padding:25px;
    background-color: lightblue;
    font-size:2rem;
    height:250px;
    transition: 
        background-color 2s ease,
        font-size 2s 1s ease;
}

div:hover {
    background-color: green;
    font-size:1rem;

}

http://css-tricks.com/almanac/properties/t/transition/