This question already has an answer here:
How to show CSS transitions only on hover?
(1 answer)
Closed 1 year ago.
So, I have a hover transition that I would like to ease in on hover, but be instantaneous off hover.
Here's a sample snippet:
.invisible{
opacity: 0;
transition: 1s;
}
div{
cursor: pointer;
}
div:hover .invisible{
opacity: 100%;
}
<div>
<p>Hover Here</p>
<p class="invisible">Now you see me</p>
</div>
What can I change in the CSS to keep the text fading in over the space of 1 second, but instantly vanish when the mouse is moved away?
You can give transition to hover state only, by default it was given to all states.
Once you'll use it for :hover, transition will occur only for mouseover, not for mouseout.
.invisible {
opacity: 0;
}
div {
cursor: pointer;
}
div:hover .invisible {
opacity: 100%;
transition: 1s; /* moved this */
}
<div>
<p>Hover Here</p>
<p class="invisible">Now you see me</p>
</div>
You just need to specify a different transition-duration for the two states, resp. specify the duration not equal zero just for the hover state.
(transition: 0s; for the normal state - because you want it to be 0, when you return into this state, from the hover state. Can be implicit, if no transition-duration is already set for that state.)
.invisible{
opacity: 0;
/* transition: 0s; */
}
div{
cursor: pointer;
}
div:hover .invisible{
opacity: 100%;
transition: 1s;
}
<div>
<p>Hover Here</p>
<p class="invisible">Now you see me</p>
</div>
Related
I'm maybe 2 weeks into coding so apologies if I don't format correctly (code and question itself).I am trying to set a delay for the time it takes the buttons to switch text. Thank you for the help!
I've tried googling this and youtube with no luck.
I have tried adding
transition
transition-delay
body{
background-color: black;
}
.column{
position: fixed;
left:0;
bottom:0;
top:55px;
width:72px;
z-index: 200;
padding-top: 20px;
}
.about,
.skills {
font-size:72px;
width: 10em;
text-align: left;
border:none;
background-color: black;
color:red;
}
.about:hover span {
display: none;
}
.about:hover:after {
transition-delay: 3s;
content: "ABOUT";
}
.skills:hover span {
display: none
}
.skills:hover:after {
content: "SKILLS"
}
<h1>
<div class="column">
<button class="about" data-hover="ABOUT">
<span>
I
</span>
</button>
<button class="skills">
<span>
AM
</span>
</button>
</div>
</h1>
First of all, I would look into the html semantics a bit. Having div tags inside an h1 doesn't make much sense. So consider changing the h1 to a div. Also, the 3s delay is enormous. Think of something a bit faster, like 300ms.
The real issue is that display states and transition don't really work together since it swaps between states like block and none. But there are other solutions to this. You could use position: relative; on a parent div and give the children position: absolute. This way, you could make the transitions with opacity instead.
I have made an example for you so you can get the idea. I have commented on the CSS so you can follow up on what is happening.
/* Lets give our spans some styling: */
span{
font-size: 30px;
font-weight: 600;
font-family: sans-serif;
margin-bottom: 2rem;
max-width: 60ch;
}
/* Lets make the "container" position relative,
this way the absolute children will stay inside the container */
.hover-effect{
position: relative;
}
/* Let's give both of the children position absolute */
.hover-effect span{
position: absolute;
color: black;
opacity: 100%;
transition: 300ms ease-in 300ms; /* Delay: 300ms*/
}
/* Let’s override the previous.
This actually happens when we remove the hover, so we want to
trigger this animation first, hence the delay of 0ms*/
.hover-effect span.on-hover{
opacity: 0%;
transition: 300ms ease-in 0ms;
}
/* When we hover the container, let's change both spans */
.hover-effect:hover span{
color: red;
opacity: 0%;
transition-delay: 0ms;
}
/* Let’s override the previous.
When we hover on the container, the span with the class "on-hover"
becomes visible, and we wait 300ms before it happens so that the
"disappearing" animation gets its time to trigger. */
.hover-effect:hover span.on-hover{
opacity: 100%;
transition-delay: 300ms;
}
<div class="hover-effect">
<span>Try and hover over me</span>
<span class="on-hover">Try and remove the hover</span>
</div>
I have an animation and I have applied it to one of the html element just fine, but then when I applied the same animation on hover to another element(img) it just keep on flickering.
My CSS
.logo-box {
position: absolute;
top: 40px;
left: 40px;
}
.logo {
height: 35px;
}
.logo-box:hover {
animation: moveInRight 1s ease-in;
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px);
}
80% {
transform: translateX(-10px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.logo-box is absolute to the .header class
My HTML body
<body>
<header class="header">
<div class="logo-box">
<img class="logo" src="img/logo-white.png" alt="logo" />
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">Outdoors</span>
<span class="heading-primary-sub">is where life happends</span>
</h1>
</div>
</header>
</body>
Can anybody help me out fixing this...
Add a delay to the start of the animation.
.logo-box:hover {
animation: moveInRight 1s ease-in 0.5s;
/*the 0.5s is the delay*/
}
Explanation if you want to know whats going on:
This is a well known problem that is actually related to UX. The flicker problem is because of the opacity. As soon as a :hover occurs (event triggered) the opacity goes to zero. Now as you take your pointer to the image, multiple hover events are triggered due to micro movements of pointer. One hover event ends and second is triggered. CSS stops animating as soon as hover is ended and opacity gets to 100% and the second hover event causes it to go to 0 right away which is the flicker. If you add some delay then the mouse would get stable and then the animation will be played.
CSS, yet, isn't offering any way to complete the animation once hover is triggered i.e. no matter if the pointer is no more on the element, animation must be completed.
This question already has answers here:
How to have multiple CSS transitions on an element?
(9 answers)
CSS transition shorthand with multiple properties?
(7 answers)
Closed 4 years ago.
I'm using Firefox 52.9.0.
I'm trying to add a skip navigation link to a page. Currently, page looks like this:
/* Accessibility */
/* Hide the skip to main content link unless it has focus */
body > a:first-child {
background: inherit;
position: fixed;
left: 0px;
top: -1em;
transition: top 2s ease-out;
}
body > a::first-child:not(:focus) {
}
body > a:first-child:focus {
top: 0px;
transition: top 0.1s ease-in;
}
skip to main content
<main id="lorem">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum... can't remember the rest, sorry.</p>
<p>This CSS is mostly fine.</p>
</main>
(Click on the page and press Tab to see the effect.)
This looks fine, except the descender and underline are visible. In order to deal with this, I told the browser to change the text colour to transparent when it didn't have focus:
/* Accessibility */
/* Hide the skip to main content link unless it has focus */
body > a:first-child {
background: inherit;
position: fixed;
left: 0px;
top: -1em;
transition: top 2s ease-out;
transition: color 2s ease-out;
}
body > a:first-child:not(:focus) {
color: darkgoldenrod;
}
body > a:first-child:focus {
top: 0px;
transition: top 0.1s ease-in;
transition: color 0.1s linear;
}
skip to main content
<main id="lorem">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum... can't remember the rest, sorry.</p>
<p>This CSS behaves strangely.</p>
</main>
(transparent is substituted for darkgoldenrod so it's easier to see the effect.)
The color transition works, but for some reason it's stopped the top transition from working!
Why is this, and how can I fix it?
Your second transition declaration erases, not adds to, the first one. This is the cascade at work.
You can't declare separate transitions additively using multiple transition declarations; you will need to group them into a single declaration like so:
body > a:first-child:focus {
top: 0px;
transition: top 0.1s ease-in, color 0.1s linear;
}
This question already has answers here:
How can I transition height: 0; to height: auto; using CSS?
(41 answers)
Closed 4 years ago.
Below is a simplified version of a restaurant menu i've created. When you hover over the dish, a description of the dish shows up, and i created a transition to make it smoother.
The next dish, the menu item below, gets pushed down when the description of the upper menu item is shown. I would like to create a transition so that the text below moves further down on the page more smoothly instead of it changing from one place to another instantly, since that looks rather glitchy on the page (if that makes any sense).
I would also like to make the opacity transition work both ways - right now, works when i hover over the item, but when i take the mouse off it, it goes away instantly, so the transition doesn't work both ways at the moment. i've tried using the not hover function with no luck.
Here's my code:
Fiddle demo
HTML:
<html>
<body>
<h4 class="navn"> Pizza </h4>
<div class="beskrivelse">
<p> ingredients: cheese, ham, pepperoni </p>
</div>
<h4 class="navn"> Hamburger </h4>
<div class="beskrivelse">
<p> Comes with salad and fries </p>
</div>
</body>
</html>
CSS:
h4:hover + .beskrivelse {
opacity: 1;
height: auto;
}
h4:hover {
color: red;
}
.beskrivelse {
height: 0;
opacity: 0;
overflow: hidden;
transition: opacity 3s ease-out;
}
.beskrivelse {
max-height: 0; /* <-- max-height since we don't know the actual height */
...
transition: all 3s ease-out; /* <-- transition all properties */
}
h4:hover+.beskrivelse {
...
max-height: 100px; /* <-- a safely large value */
}
Demo
Well, it looks jumpy because CSS values can only be transitioned to and from fixed unit values. height:0 and height:auto don't have units and therefore can't display a transition.
There are multiple workarounds, each with their own drawbacks. Here's a bunch more detail about the available options. Switching to max-height as isherwood said is one of the more accepted options.
That said, there are other ways you could solve it without trying to animate height.
h4 {
padding:0;
margin:0;
}
.beskrivelse {
/* give container position to keep child in place */
position: relative;
margin:0;
padding:0;
}
.beskrivelse p {
/* take the element out of the flow */
position: absolute;
top: 0;
left:100px;
z-index: 10;
/* move it away and hide it */
transform: translateY(200%);
opacity:0;
/*setup animation */
transition: all 0.25s ease-in-out;
/* make it look nice */
margin:0;
padding: 10px;
border-radius: 8px;
border: 1px solid #6DABE4
background: #ffff;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
}
h4:hover + .beskrivelse p {
transform: translateY(0);
opacity:1;
}
<h4 class="navn"> Pizza </h4>
<div class="beskrivelse">
<p> ingredients: cheese, ham, pepperoni </p>
</div>
<h4 class="navn"> Hamburger </h4>
<div class="beskrivelse">
<p> Comes with salad and fries </p>
</div>
My problem is this:
I want to have a menu fade in and out of visibility when a user hovers over its parent container. I also want to do the animation with css only. Here's the code as it stands:
HTML
<div class="color-dropdown">
<div class="title">
<h4>Red</h4>
</div>
<div class="options">
<ul class="colors">
<li>Red</li>
<li>Blue</li>
</ul>
</div>
</div>
SCSS
.color-dropdown {
height: 60px;
overflow: hidden;
.options {
opacity: 0;
/*
The problem - This css transition never
gets seen on mouseout, most likely because
overflow is immediately hidden.
*/
transition: opacity 0.2s linear;
}
&.expanded {
overflow: visible;
.options {
opacity: 1;
}
}
}
Coffeescript
colorDropdown = $('.color-dropdown')
title = $('.title h4')
colors = $('.colors li')
colorDropdown.hover ->
# Fade in the options
colorDropdown.addClass 'expanded'
, ->
# Fade out - Broken!
colorDropdown.removeClass 'expanded'
colors.click ->
# Fade out - Broken!
colorDropdown.removeClass 'expanded'
# Change the current color
title.text $(this).text()
# CSS bounce animation (using animate.css here)
title.addClass 'animated bounce'
setTimeout ->
title.removeClass 'animated bounce'
, 1000
I've made a jsfiddle here so that you can easily see the problem.
Thanks in advance!
The problem is your overflow: hidden <-> overflow: visible change ... when you remove .expanded you will not see the transition on the child if the overflow on the parent jumps back to hidden.
You can fix this with using a transition on visibility of the child (.options) element.
Something like this (with transition-delay set to 0s) perhaps:
.color-dropdown {
height: 60px;
overflow: visible;
.options {
opacity: 0;
visibility:hidden;
transition: visibility 0s linear 0.2s, opacity 0.2s linear;
}
&.expanded .options {
opacity: 1;
visibility:visible;
transition-delay: 0s;
}
}
DEMO
More on this can be found here: http://www.greywyvern.com/?post=337