CSS3按钮背景和文本颜色动画顺序

尝试在悬停时为背景和文本更改排序动画计时。第一个动画背景颜色为蓝色，并在背景到达文本后更改文本颜色

问题：

背景和文本动画同时启动，而不是先启动背景，然后再启动文本颜色

参考代码：

div{
身高：100%；
填充：20px；
背景：灰色；
}
a{
线高：19px；
填充：15px 25px 16px；
背景：白色；
边界：无；
文本对齐：居中；
文字装饰：无！重要；
显示：块；
边缘底部：10px；
字体大小：14px！重要；
宽度：220px；
}
a:悬停，
a:悬停跨度{
背景位置：0.100%；
}
.按钮{
背景：线性梯度（90度，蓝色50%，#fff 0）；
背景位置：100%100%；
背景大小：200%100%；
颜色：#2424！重要；
过渡：所有10秒轻松；
}
.按钮跨度{
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
背景剪辑：文本；
背景图像：线性梯度（90度，#fff，#fff 50%，#240）；
背景位置：100%；
背景大小：200%100%；
位置：相对位置；
文字装饰：无；
过渡：所有5s轻松；
}

测试

使用

转换延迟应能解决以下问题：

。按钮span{
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
背景剪辑：文本；
背景图像：线性梯度（90度，#fff，#fff 50%，#240）；
背景位置：100%；
背景大小：200%100%；
位置：相对位置；
文字装饰：无；
过渡：所有10秒轻松；
过渡延迟：10秒；
}
感谢@Moamen的回答，使用过渡延迟是延迟颜色变化，只有在完全改变背景后才生效…而不是文本颜色变化，背景颜色变化平稳..发布了一个在线找到的工作解决方案示例，但它使用了两个元素来实现