CODEWITHSUNDEEP
csscss-transitions
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

CSS Transition won't happen as expected

.tooltip {
  display: block;
  margin: 50px;
  position: relative;
  transition: 10s linear all;
  width: 100px;
}
.tooltip:after,
.tooltip:before {
  transition: 10s linear all
}
.tooltip:before {
  z-index: 99;
  top: 100%;
  right: 50000px;
  position: absolute;
  margin-top: -12px
}
.tooltip:after {
  background: #FCE0BA;
  top: 100%;
  right: 50000px;
  position: absolute;
  z-index: 98;
  width: 100px
}
.tooltip:hover:before {
  border: solid;
  border-color: #FCE0BA transparent;
  border-width: 0px 6px 12px 6px;
  content: "";
  right: 50%;
  margin-top: -12px
}
.tooltip:hover:after {
  background: #FCE0BA;
  color: #559bd9;
  content: attr(title);
  right: 20%;
  padding: 6px;
  font-size: 18px;
  line-height: 1;
  max-height: 999999px
}
<span class="tooltip" title="Lorem ipsum!">Hover me</div>

I am trying to create a transition for the right position,

As you can see, it has a very large right value, and then the one i need,

But for some reason, the transition won't animate,

Do you know what i am missing?

Upvotes: 1

Views: 68

Answers (3)

i7nvd
i7nvd

Reputation: 1318

Okay, a few problems. I didn't finish figuring out why, but if you inspect element before you hover, there is no :before and :after even visible. So step 1 is cleaning up your CSS. Only 1 property is changing on hover, and that's the right value. So when you declare your .tooltip:hover:before, there should only be one property in that: the changed right value.

Problem #2 is that you can't go from px to % in a transition. Transitions only effect numbers of same values. So here's what I did instead:

First, build your tooltip as :before and :after the way you want it to appear on hover. Then once it looks good, change your right: values to where the start point of your animation will be. Then you set the :hover:before and :hover:after just to the right values. See below.

Problem 3: your distance and time span for animation were both unusually long. I know you wanted it to be not visible and slide in from the left, so let's solve that with some practical animations. By targetting which properties are animated, we can make this look pretty nice.

.tooltip {
  display: block;
  margin: 50px;
  position: relative;
  transition: 10s linear all;
  width: 100px;
}
.tooltip:before {
  border: solid;
  border-color: #FCE0BA transparent;
  border-width: 0px 6px 12px 6px;
  content: "";
  margin-top: -12px;
  z-index: 99;
  top: 100%;
  position: absolute;
  margin-top: -12px
}
.tooltip:after {
  background: #FCE0BA;
  color: #559bd9;
  content: attr(title);
  padding: 6px;
  font-size: 18px;
  line-height: 1;
  max-height: 999999px;
  background: #FCE0BA;
  top: 100%;
  position: absolute;
  z-index: 98;
  width: 100px
}
.tooltip:hover:before {
  right: 50%;
  opacity:1;
}
.tooltip:hover:after {
  right: 20%;
  opacity:1;
}
.tooltip:after,
.tooltip:before {
  transition: 1s linear all;
  opacity:0;
  right:100%;
}
<span class="tooltip" title="Lorem ipsum!">Hover me</div>

Upvotes: -1

Daan
Daan

Reputation: 2799

The problem is caused because your :before and :after pseudo-elements don't contain content:"" before :hover occurs. You can't animate something if it never showed up.

I also changed transition: 10s linear all to transition: all 10s linear, as this is the correct shorthand syntax for transition.

Now the transition occurs really quickly, due to the extremely high right:50000px set, it travels a looooong time in this 10 seconds (barely noticeable). - I changed this to a lower amount.

Working JSFiddle - note that the animation is really terrible now, but at least made it to work. You should still have to change it the way you desire, but it's showing that it works now.

Upvotes: 2

Emily
Emily

Reputation: 221

For CSS transitions to work, the values being transition to and from need to be either both lengths or percentages (or calc()). See this section in the W3C CSS Transitions doc.

The animated value is interpolated from the from and to values when both the from and the to values of the property have the type described. (When a composite type such as "length, percentage, or calc" is listed, this means that both values must fit into that composite type.) When multiple types are listed in the form "either A or B", both values must be of the same type to be interpolable.

Upvotes: 0

Related Questions