为什么颜色过渡只适用于后退 CSS

Question

我正在尝试比其他任何方法更快地更改文本颜色，但是在进行中，过渡适用于所有但不是颜色，并且在返回过程中，过渡适用于所有颜色，也适用于颜色。为什么在第一次转换时颜色不起作用

#home-section button {
  margin: 50px auto;
  width: auto;
  border: none;
  border-radius: 0px;
  background-color: #eee8e8;
  padding: 2px 2px;
  font-size: 0.9rem;
  font-weight: bold;
}

#home-section article {
  width: 0;
  height: 0;
  overflow: hidden;
  color: transparent;
  -webkit-transition: all 3s, color 1s;
  transition: all 3s, color 1s;
}

#home-section button:focus + article {
  width: 670px;
  height: 500px;
  line-height: 180%;
  letter-spacing: 1px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #797879 #252625;
  background: #625b6b;
  color: white;
  padding: 10px;
}

#home-section button:focus {
  background-color: #252625;
  color: #eee8e8;
}

这是 html 它是一个反应组件

import React from 'react';
import './styles/Home.css';

function Main() {
    return (
        <section id="home-section">
            <h1>Hi,</h1>
            <h2>My Name is Elmahdi,</h2>
            <h2>And I'm a Front-End Web Developer.</h2>
            <button>Read My story</button>
            <article>
                texttextextefgzehgozsfzenf texttexttextextefgzehgozsfzenf texttexttextextefgzehgozsfzenf texttexttextextefgzehgozsfzenf texttexttextextefgzehgozsfzenf texttexttextextefgzehgozsfzenf texttexttextextefgzehgozsfzenf texttexttextextefgzehgozsfzenf texttexttextextefgzehgozsfzenf texttexttextextefgzehgozsfzenf texttexttextextefgzehgozsfzenf texttexttextextefgzehgozsfzenf texttexttextextefgzehgozsfzenf texttexttextextefgzehgozsfzenf texttexttextextefgzehgozsfzenf text
            </article>
        </section>
    )
}

export default Main

Answer 1

开始时颜色在 1 秒处过渡，但背景过渡造成颜色在初始过渡时需要 3 秒的错觉。如果您将初始背景颜色设置为#625b6b，您会看到初始过渡颜色只需要 1 秒。

这里是一个背景颜色默认设置为#625b6b的例子。

#home-section button {
  margin: 50px auto;
  width: auto;
  border: none;
  border-radius: 0px;
  background-color: #eee8e8;
  padding: 2px 2px;
  font-size: 0.9rem;
  font-weight: bold;
}

#home-section article {
  background: #625b6b;
  width: 0;
  height: 0;
  overflow: hidden;
  color: transparent;
  -webkit-transition: all 3s, color 1s;
  transition: all 3s, color 1s;
}

#home-section button:focus+article {
  width: 670px;
  height: 500px;
  line-height: 180%;
  letter-spacing: 1px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #797879 #252625;
  background: #625b6b;
  color: white;
  padding: 10px;
}

#home-section button:focus {
  background-color: #252625;
  color: #eee8e8;
}

<div id="home-section">
  <button>Button</button>
  <article>
    This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
  </article>
</div>

Answer 2

我这样做是为了做我正在寻找的事情

article {
    background: #625b6b;
    width: 10px;
    height: 10px;
    overflow: hidden;
    color: transparent;
    visibility: hidden;
    transition: all 1s, color 0.5s ease 0ms;
  }
  button:focus + article {
    visibility: visible;
    width: 670px;
    height: 500px;
    line-height: 180%;
    letter-spacing: 1px;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: #797879 #252625;
    background: #625b6b;
    color: white;
    padding: 10px;
    transition: all 1.5s, color 0.85s ease-out 500ms;
  }

为什么颜色过渡只适用于后退 CSS

why the color transition only works on back way CSS

css

css-transitions