CODEWITHSUNDEEP
css
Pascal
Pascal

Reputation: 119

Fade-out animation without fade-in, in CSS code

I have this CSS code to insert in my custom CSS field for my website

Here is my need: when I hover on my cart button, I want the box to appear immediately, and then when I remove the mouse, to fade out with an animation of 1,5 sec So no fade-in animation, only fade-out animation

The box selector is: .header-cart.invisible

I have tried this first:

.header-cart.invisible {
    transition: 1.5s;
}
.header-cart.invisible:hover {
    visibility: visible;
    opacity: 1;
}

But I have fade-out AND fade-in as well.

I have tried this other version, with transition attribute:

.header-cart.invisible {
    transition: 0s 1.5s, opacity 1.5s linear;
}
.header-cart.invisible:hover {
    visibility: visible;
    opacity: 1;
}

This time, fade-in no longer displays, but the animation now interferes with my button "Add to Cart" : when I click on it, my cart box now displays with a 1.5 second delay, while I want it to display without any

So I have tried to add more code on the add to cart button to force it to display the cart box without delay, but I am unsuccessful: 

.header-cart.invisible {
    transition: 0s 1.5s, opacity 1.5s linear;
}
.header-cart.invisible:hover {
    visibility: visible;
    opacity: 1;
}
#add_to_cart_btn.button:active > .header-cart.invisible {
    visibility: visible;
    opacity: 1;
    transition: 0s 0s !important;
    transition-delay: 0s !important;
}

Would someone happen to have an idea so that it can fit my need, from any version of my code?

It would be great, thank you very much :)

PS: I really need this code to be 100% CSS, even if I know it would be more competitive using PHP or Javascript

Upvotes: 1

Views: 378

Answers (3)

Pascal
Pascal

Reputation: 119

First, thank you for your reply

I am a bit unfamiliar with the "+" sign in selector And I'm unsure I understood perfectly the "div" selector from CBroe

But I have tried both your methods from what I understood

1)

  .header-cart.invisible {
    position: fixed !important;
    top: 25px !important;
    transition: transition 1.5s !important;
  }
  .header-cart.invisible:hover {
    visibility: visible;
    opacity: 1;
  }
  #add_to_cart_btn.button:active + .header-cart.invisible {
    visibility: visible;
    opacity: 1;
    transition: none !important;
  }

So with this method, I have no fade-in and no fade-out. Maybe my website behaves another way You may try this URL: https://www.tresor-ethnique.com/collections/tibetain/products/pendentif-arbre-de-vie

And one issue I notice on your code snipped (based on my needs) is that "whoop whoop" disappears in spite me hovering it

2)

  .header-cart.invisible {
    position: fixed !important;
    top: 25px !important;
    transition: opacity 1.5s ease-out !important;
  }
  .header-cart.invisible:hover {
    visibility: visible;
    opacity: 1;
  }
  #add_to_cart_btn.button:active + .header-cart.invisible {
    visibility: visible;
    opacity: 1;
    transition: none !important;
  }

So with this method, I have fade-in but no fade-out.

Exactly the reverse I want... And I pretty much did the same way with other methods

Again maybe my website behaves in a certain way

Based on your code snippet, It's not exactly what I want to do (sorry if not clear)

I want :

  • if hover "Cart button" then box appears immediately => OK

  • if hover "Box" then box still here => not OK on your code snippet, it disappears with 1.5s animation

  • if remove from "Box" then 1.5s animation => not OK on your code snippet, it disappears immediately

  • if remove from "Cart button" then 1.5s animation => not OK on your code snippet, it disappears immediately

I hope this is more clear now :)

Upvotes: 0

bdalina
bdalina

Reputation: 523

Just don't add transitions when hover the cart button, then add ease-out transition when you hover the box div

.header-cart.invisible {
    background-color:#000;
    color:#fff;
    opacity:0;
    padding:20px; 
    border:solid 1px #ddd;
    display:block;
}
.header-cart.invisible:hover {
    transition: opacity 1.5s ease-out;
}
#add_to_cart_btn.buton
{
   padding:20px; 
    border:solid 1px #ddd;
    display:block;
}
#add_to_cart_btn.button:hover + .header-cart.invisible {
    transition: none;
    opacity:1;
}
<button id="add_to_cart_btn" class="button">
Cart Button - show box immediately
</button>

<button class="header-cart invisible">
Box - fade when hover
</button>

Upvotes: 0

C3roe
C3roe

Reputation: 96407

when I hover on my cart button, I want the box to appear immediately, and then when I remove the mouse, to fade out with an animation of 1,5 sec So no fade-in animation, only fade-out animation

Then simply specify a transition of 1.5s duration for the normal state of the element (that it will be returning to after :hover), and 0s duration/no transition for the :hover state.

div {
  margin: 1em;
  padding: 1em;
  border: 1px solid red;
}

div + div {
  opacity: 0;
  transition: 1.5s;
  color: #fff;
  background: #00f;
}

div:hover + div {
  opacity: 1;
  transition: none;
}
<div>hover me</div>
<div>whoop whoop</div>

Upvotes: 1

Related Questions