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

Question

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

问题：

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

参考代码：

    div {
        height: 100%;
        padding: 20px;
        background: grey;
    }

    a {
        line-height: 19px;
        padding: 15px 25px 16px;
        background: white;
        border: none;
        text-align: center;
        text-decoration: none!important;
        display: block;
        margin-bottom: 10px;
        font-size: 14px!important;
        width: 220px;
    }

    a:hover,
    a:hover span {
        background-position: 0 100%;
    }


    .button {
        background: linear-gradient(90deg, blue 50%, #fff 0);
        background-position: 100% 100%;
        background-size: 200% 100%;
        color: #242424!important;
        transition: all 10s ease;
    }

    .button span {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        background-image: linear-gradient(90deg, #fff, #fff 50%, #242424 0);
        background-position: 100%;
        background-size: 200% 100%;
        position: relative;
        text-decoration: none;
        transition: all 5s ease;
    }

    <div>
        <a class="button">
            <span>Testing</span>
        </a>
    <div>

尝试使用transition-delay，但没有效果

Codepen 网址 - https://codepen.io/nagasai/pen/mdRBZbd

从网上找到以下解决方案，但它适用于使用两个元素创建但只使用一个元素和 CSS

body {
  text-align: center;
}

.btn {
  padding: 10px 20px;
  position: relative;
  border: 2px solid #222;
  color: #fff;
  background-color: #222;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-transform: uppercase;
  font-family: monospace;
  letter-spacing: -1px;
}
.btn [class^=btn__text] {
  font-size: 24px;
}
.btn .btn__text-dynamic,
.btn .btn__text-dynamic-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  transition: all ease 10s;
}
.btn .btn__text-dynamic {
  background-color: #fff;
  color: #222;
  overflow: hidden;
}
.btn:hover .btn__text-dynamic {
  transform: translateX(100%);
}
.btn:hover .btn__text-dynamic-inner {
  transform: translateX(-100%);
}

<button class="btn btn--animation-from-right">
  <span class="btn__text-static">Cover left</span>
  <div class="btn__text-dynamic">
    <span class="btn__text-dynamic-inner">Cover left</span>
  </div>
</button>

codepen - https://codepen.io/nagasai/pen/zYNpgpQ

Answer 1

使用transition-delay应该可以解决问题：

.button span {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        background-image: linear-gradient(90deg, #fff, #fff 50%, #242424 0);
        background-position: 100%;
        background-size: 200% 100%;
        position: relative;
        text-decoration: none;
        transition: all 10s ease;


        transition-delay: 10s;
    }