Is there a way to make the text color change faster than everything else in the transition? It seems that on the first transition, the color won't work but works fine going back. Can anyone explain why this is happening?
#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;
}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