CODEWITHSUNDEEP
htmlcss
user3192978
user3192978

Reputation: 95

CSS Transition for parent and child without delay

I have the following code

a {
  color: #F00;
  transition: all 0.5s;
}

a:hover {
  color: #FF0;
}

a:hover i {
  margin-right: 10px;
}

a i {
  transition: all 0.5s;
}
<a href="#">
  <i class="fa fa-plus">+</i>
  Button Text
</a>

I want that the transition effect changes the color and the space between the icon and the text at the exact same time, when hovering over the link.

This way it first changes the space and then changes the color, so the animation plays in "sequential" mode.

How am I able to get the animation correct, so it changes EXACTLY with the space and the color, and not with this delay.

Upvotes: 1

Views: 735

Answers (1)

Karen Grigoryan
Karen Grigoryan

Reputation: 5432

Try setting the just the margin transition on the inner element:

a {
  color: #F00;
  transition: all 0.5s;
}

a:hover {
  color: #FF0;
}

a:hover i {
  margin-right: 10px;
}

a i {
  transition: margin 0.5s;
}
<a href="#">
  <i class="fa fa-plus">+</i>
  Button Text
</a>

Upvotes: 2

Related Questions