CODEWITHSUNDEEP
htmlcsscss-transitionscss-animations
Badr
Badr

Reputation: 197

How to create different transition / animation delay?

I have a div with two other div's inside it that are positioned absolute and have a transition property.

On mouse hover i need to move the first div by changing the bottom property, and show the second (which has opacity 0 by default) by changing the opacity to 1.

The problem is that the texts show up on top of each other, so i need the second element to wait for the first element's transition and the inverse when the mouse leaves the wrapper, so i gave a transition delay to the second element, which kind of fixed this. But there is still a problem when the mouse leaves the box because of the transition delay, the second element stays visible for some time while the first element moves back to its initial position.

.wrapper{
    position: relative;
    width: 200px;
    height:300px;
    background-color: #777;
}

.title{
    position: absolute;
    bottom: 10px; /* becomes 120px on hover */
    transition: bottom .6s ease;
}

.wrapper:hover .title{
    bottom: 120px;
}

.text{
    position: absolute;
    bottom: 10px;
    opacity: 0; /* becomes on hover 1 */
    transition: opacity .6s ease .6s; /* added transition delay to wait for the first element to go up */
}

.wrapper:hover .text{
    opacity: 1;
}
  <div class="wrapper">
      <div class="title">My title</div>
      <div class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facilis, a.</div>
  </div>

Is there some work-around for this (without javascript) ?

Upvotes: 0

Views: 36

Answers (1)

James Coyle
James Coyle

Reputation: 10398

You can overwrite the transition delay on hover to reverse the effect:

.wrapper{
    position: relative;
    width: 200px;
    height:400px;
    background-color: #777;
}

.title{
    position: absolute;
    bottom: 10px; /* becomes 120px on hover */
    transition: bottom .6s ease .6s;
}

.wrapper:hover .title{
    bottom: 120px;
    transition: bottom .6s ease;
}

.text{
    position: absolute;
    bottom: 10px;
    opacity: 0; /* becomes on hover 1 */
    transition: opacity .6s ease 0s; /* added transition delay to wait for the first element to go up */
}

.wrapper:hover .text{
    transition: opacity .6s ease .6s;
    opacity: 1;
}
<div class="wrapper">
      <div class="title">My title</div>
      <div class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facilis, a.</div>
  </div>

Upvotes: 1

Related Questions