Delay transition error

Question

Delay transition error

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I'm doing a CSS animation with hover, however a problem has arisen, when hovering the item, it first transitions into the first element within itself, and after that, it transitions into another, but I need a transition, how can I fix this?

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);
}

css css-hover

asked by anonymous 06.09.2017 / 15:26

2 answers

0

Why do you have this?

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

Just throw that works.

06.09.2017 / 17:42

How to get a string from a json? EditText already filled in after user login using firebase

score 2 · Accepted Answer

Use transition only in the required 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