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

【问题标题】：Crossfade animation on css text background-clip (webkit)css文本背景剪辑上的交叉淡入淡出动画（webkit）
【发布时间】：2014-02-02 05:19:43
【问题描述】：

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

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

如果我尝试使用transition:5s all 对其进行动画处理并将鼠标悬停在其上，则背景会立即切换为白色，使文本的覆盖层淡入。有什么方法可以使这两个事件交叉淡入淡出（背景变为白色，背景覆盖文本)?

【问题讨论】：

您可以用逗号分隔转换及其各自的属性。更多代码或 JSFiddle 会有所帮助。 css-tricks.com/almanac/properties/t/transition

标签： css webkit css-transitions

【解决方案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/

【讨论】：