I want to remove the delay I applied after leaving the hover state
I have a little box where I applied a hover effect with different delays. Everything works fine except my paragraph. I did a delay of 4.5s so it will pop out after the .goals-title is dissapeared. But after I leave the hover state it fades out way to slow. Is there a way to remove the delay on leaving the hover state.
/*thats the delay with the transition*/
.goals-text {
transition: opacity 0.75s ease-in-out;
transition-delay: 4.5s;
opacity: 0%;
}
/*the hover effect*/
.goals:hover > .goals-text {
opacity: 100%;
}
You can set a transition-delay that is longer when you hover the element :
/*thats the delay with the transition*/
.goals-text {
transition: opacity 0.75s ease-in-out;
transition-delay: 0s;
opacity: 0%;
}
/*the hover effect*/
.goals:hover > .goals-text {
opacity: 100%;
transition-delay: 2s;
}
<div class="goals">
v hover here v
<div class="goals-text">The animation starts after 2s on hover but immediately on mouse out</div>
^ hover here ^
</div>
Related
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
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>
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>
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 :)
I am trying to create animation, where on hover i am changing image from default image to hover image.
I am using CSS3 animation and keyframe properties,
CSS
.fader img {
transition: all 1s;
}
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.fader:hover img:first-child {
animation: toggle 2s infinite alternate 2s;
}
.fader:hover img:last-child {
opacity: 1;
animation: toggle 2s infinite alternate;
}
#keyframes toggle {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
HTML
<div class="fader">
<img src="http://placehold.it/200x200/000000" />
<img src="http://placehold.it/200x200/FFFFFF" />
</div>
I have created fiddle for the same
This is working fine , I need to do little change.
when one image change to next it leaves impression of the last one.
I am looking for the transition without footprint of last.
As given in fiddle , before black image comes, white image get slowly fade out then black comes, same happen from black to white. I want change without fade out effect.
I have tried
animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out
but that doesn't work,
also i reduced delay time
animation-delay: .5s
but still that doesn't work. any idea ?
I want to fade an item in using opacity and set its visibility accordingly, once the opacity transition is done.
Consider this code:
.menu {
transition: opacity 0.25s ease-out 0s, visibility 0s ease 0.25s;
opacity: 0;
visibility: hidden;
}
.menu.open {
opacity: 1;
visibility: visible;
}
This menu pops straight in, due to the 0.25s delay on visibility, but fades out correctly.
I want it to fade both in and out, but I can't find a way to set a delay function to the visibility property separately for in and out transitions. Is this even possible?
So ideally, I want to tell visibility to have a 0s delay to start and then a 0.25s delay to end, but it seems I can only set one value.
This happens because your item is no longer visible. As you're delaying the visibility transition, your item will get its opacity changed, without this change being visible. Then (0.25s later), the visibility transition begin... but your item has already an opacity: 1.
You should remove the transition delay/duration for visibility when item is showing:
$(document).on('click', function(event) { $('.menu').toggleClass('open'); });
.menu {
transition: opacity 0.25s ease-out 0s, visibility 0s ease 0.25s;
opacity: 0;
visibility: hidden;
}
.menu.open {
transition: opacity 0.25s ease-out;
opacity: 1;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav class="menu open">My menu</nav>
How can i make the transition still occur after the event is removed!
I want to resize div height when hover to be smaller, but I want the size to still smaller even when I remove hover from the div.
#header{
background-color: red;
height:300px;
width:100%;
-moz-transition:height 500ms linear;
-webkit-transition:height 500ms linear;
-o-transition:height 500ms linear;
-ms-transition:height 500ms linear;
transition:height 500ms linear;
}
#header:hover{
height:100px;
}
I want the div to have 100px height after the mouse is out, can I make it using only css, or I have to use jQuery to change the class or sth like that?
You can't make a hover "stick" with just CSS. You would need to add a class or inline style with Javascript to maintain the appearance.
You can make a hover "stick" with just CSS.
#keyframes hover {
0% {
// normal styles
}
100% {
// hover styles
}
}
.class {
animation-name: hover;
animation-duration: 350ms;
animation-fill-mode: backwards;
animation-play-state: paused;
}
.class:hover {
animation-fill-mode: forwards;
animation-play-state: running;
}
See http://cdpn.io/GLjpK and http://lea.verou.me/2014/01/smooth-state-animations-with-animation-play-state/.
I'm trying to make a transition effect with background-color when hovering menu items, but it does not work. Here is my CSS code:
#content #nav a:hover {
color: black;
background-color: #AD310B;
/* Firefox */
-moz-transition: all 1s ease-in;
/* WebKit */
-webkit-transition: all 1s ease-in;
/* Opera */
-o-transition: all 1s ease-in;
/* Standard */
transition: all 1s ease-in;
}
The #nav div is a menu ul list of items.
As far as I know, transitions currently work in Safari, Chrome, Firefox, Opera and Internet Explorer 10+.
This should produce a fade effect for you in these browsers:
a {
background-color: #FF0;
}
a:hover {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
<a>Navigation Link</a>
Note: As pointed out by Gerald in the comments, if you put the transition on the a, instead of on a:hover it will fade back to the original color when your mouse moves away from the link.
This might come in handy, too: CSS Fundamentals: CSS 3 Transitions
ps.
As #gak comment below
You can also put in the transitions into content #nav a for fading back to the original when the user moves the mouse away from the link
To me, it is better to put the transition codes with the original/minimum selectors than with the :hover or any other additional selectors:
#content #nav a {
background-color: #FF0;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
#content #nav a:hover {
background-color: #AD310B;
}
<div id="content">
<div id="nav">
Link 1
</div>
</div>
Another way of accomplishing this is using animation which provides more control.
/* declaring the states of the animation to transition through */
/* optionally add other properties that will change here, or new states (50% etc) */
#keyframes onHoverAnimation {
0% {
background-color: #FF0;
}
100% {
background-color: #AD310B;
}
}
#content #nav a {
background-color: #FF0;
/* only animation-duration here is required, rest are optional (also animation-name but it will be set on hover)*/
animation-duration: 1s; /* same as transition duration */
animation-timing-function: linear; /* kind of same as transition timing */
animation-delay: 0ms; /* same as transition delay */
animation-iteration-count: 1; /* set to 2 to make it run twice, or Infinite to run forever!*/
animation-direction: normal; /* can be set to "alternate" to run animation, then run it backwards.*/
animation-fill-mode: none; /* can be used to retain keyframe styling after animation, with "forwards" */
animation-play-state: running; /* can be set dynamically to pause mid animation*/
}
#content #nav a:hover {
/* animation wont run unless the element is given the name of the animation. This is set on hover */
animation-name: onHoverAnimation;
}
You can simply set transition to a tag styles and change background in hover
a {
background-color: #FF0;
transition: background-color 300ms linear;
-webkit-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
}
a:hover {
background-color: #AD310B;
}
<a>Link</a>