Delay error in transition

Question

I’m doing a CSS animation with Hover, but a problem has arisen, when giving the item the Hover, it first performs the transition in the first element within itself, and after that, it makes the transition in another, but I need a simultaneous transition, how can I fix this problem ?

HTML

<div class="service-thumb">
    <span><svg style="width:70px;height:70px" viewBox="0 0 24 24"><path fill="#000000" d="M22,9V7H20V5A2,2 0 0,0 18,3H4A2,2 0 0,0 2,5V19A2,2 0 0,0 4,21H18A2,2 0 0,0 20,19V17H22V15H20V13H22V11H20V9H22M18,19H4V5H18V19M6,13H11V17H6V13M12,7H16V10H12V7M6,7H11V12H6V7M12,11H16V17H12V11Z" /></svg></span>
    <div class="thumb-text">
        <h2>Briefing</h2>
        <p>Nós criamos a trajetória certa para que seu negócio cresça</p>
    </div>
</div>

CSS

.service-thumb{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:48px;
    transition:all .8s ease-in-out;
}
.service-thumb *{
    transition:all .8s ease-in-out;
}
.service-thumb:hover,.service-thumb:hover path{
    color:#fff;
    fill:#fff;
    background-color:rgba(0,0,0,1);
}

Answer 1

Use the transition only in the necessary elements.

.service-thumb {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px;
}

.service-thumb,
.service-thumb .thumb-text,
.service-thumb path {
  transition: all .8s ease-in-out;
}

.service-thumb:hover {
  background-color: rgba(0, 0, 0, 1);
}

.service-thumb:hover .thumb-text,
.service-thumb:hover path {
  color: #fff;
  fill: #fff;
}

<div class="service-thumb">
  <span><svg style="width:70px;height:70px" viewBox="0 0 24 24"><path fill="#000000" d="M22,9V7H20V5A2,2 0 0,0 18,3H4A2,2 0 0,0 2,5V19A2,2 0 0,0 4,21H18A2,2 0 0,0 20,19V17H22V15H20V13H22V11H20V9H22M18,19H4V5H18V19M6,13H11V17H6V13M12,7H16V10H12V7M6,7H11V12H6V7M12,11H16V17H12V11Z" /></svg></span>
  <div class="thumb-text">
    <h2>Briefing</h2>
    <p>Nós criamos a trajetória certa para que seu negócio cresça</p>
  </div>
</div>

Jsfiddle

Answer 2

Why do you have this?

.service-thumb *{
    transition:all .8s ease-in-out;
}

Just take that it works.