css - 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/