I have text that should fade in on hover and fade out when the mouse leaves the bounding box. For that I used the following CSS:
.project h3 {
/* Other styles */
opacity: 0; /* Set the default opacity to 0 */
}
.project:hover h3 {
opacity: 1; /* Set the opacity to 1 when hovered over */
transition: opacity 0.3s ease; /* Add a smooth transition for the opacity change */
}
.project:not(:hover) h3 {
transition: opacity 0.6s ease; /* Add a slower transition for the opacity change when not hovered over */
}
When I load the page, I want it to be invisible from the start, but right now it starts opaque and fades out immediately. ChatGPT keeps suggesting to just remove the ".project:not(:hover) h3" style and is driving me insane. How can I keep the fade-out when I move my mouse away and still have it be invisible from the start?
The html context is literally just a div with the class "project" and that h3 in it, i created a separate test project to strip it down, the problem persisted.
Related
I've got a hover css animation to "fade out" text on a button (and scroll an icon across), this works across all the main browsers, except for IE Edge. In IE Edge the text flickers. I've tried different things to make it work, but no matter what I've tried, it still flickers on IE Edge. My code is:
#navbar ul li.item-122 a:hover{-webkit-animation:fadeOutText 0.5s;-moz-animation:fadeOutText 0.5s ease-in-out;-ms-animation:fadeOutText 0.5s ease-in-out;-o-animation:fadeOutText 0.5s ease-in-out;animation:fadeOutText 0.5s ease-in-out;-webkit-backface-visibility:hidden} /* the text to fade */
#navbar ul li.item-122 a:hover::before,#navbar ul li.item-122 span:hover::before{-webkit-animation:moveToRight 0.5s ease-in-out;-moz-animation:moveToRight 0.5s;-ms-animation:moveToRight 0.5s ease-in-out;-o-animation:moveToRight 0.5s ease-in-out;animation:moveToRight 0.5s ease-in-out} /* the icon moving - this works fine, it's the text which flickers */
#-webkit-keyframes fadeOutText{
0%{color:#005baa}
80%{color:#005baa}
100%{color:#fff}
}
#-moz-keyframes fadeOutText{
0%{color:#005baa}
80%{color:#005baa}
100%{color:#fff}
}
#-o-keyframes fadeOutText{
0%{color:#005baa}
80%{color:#005baa}
100%{color:#fff}
}
#keyframes fadeOutText{
0%{color:#005baa}
80%{color:#005baa}
100%{color:#fff}
}
If you need the icon moving css, let me know, but I don't think it has any impact on the flickering text??
I have a list of elements, which when hovered over show a set of controls to remove them. The controls transition in with opacity values.
.duplicate-controls {
position: relative;
float: left;
opacity: 0;
transition: opacity linear 0.7s; }
.duplicate-group:hover .duplicate-controls {
opacity: 1;
transition: opacity linear 0.7s; }
When I'm animating the content, it'll skip or interrupt the animation in a jarring fashion. If I remove the opacity transitions, i can't reproduce the issue.
Please see the following gif for a visual representation of what i'm talking about.
This is it interrupting.
http://gfycat.com/IncomparableBlaringAsianporcupine
This is how it should animate.
http://gfycat.com/CheapMajesticBluebottlejellyfish
Remove the transition property from
.duplicate-group:hover .duplicate-controls{}
I have the following situation: I have an element .animated-container which is invisible by default. When it gets an additional .is-visible class the element fades in with a slight move from the top. That is fine so far. Now my problem is, that the exit animation should be without the slight move back to the top which currently leads to a jump of my element.
The enter transition looks like this:
.is-visible {
transition: opacity .2s, margin-top .4s;
opacity: 1;
visibility: visible;
margin-top: 0;
}
and the exit transition like this:
.animated-container {
/* ... */
transition: opacity .2s, visibility .2s;
margin-top: -60px;
opacity: 0;
visibility: hidden;
}
Having my code like this makes my element jump since margin-top is not animated when removing the .is-visible class.
See my current code here
Thank you so much for every upcoming answer!
Just add a margin-top transition with a delay that lasts the duration of the other animations..
This way it will wait for the other transitions to finish and then try the margin-top (which you do not care about since it will already be invisible.)
.animated-container{
/*...*/
transition: opacity .2s, visibility .2s, margin-top 0s .2s;
}
Demo at http://codepen.io/gpetrioli/pen/xbbavJ
I'm showing and hiding elements with a fade in / fade out effect.
CSS
.element {
opacity: 1.0;
transition: opacity 0.3s linear;
}
.element.hidden {
opacity: 0.0;
}
JS
// hide
$('someElement').addClassName('hidden');
// show
$('someElement').removeClassName('hidden');
The problem with this is that an invisible element still occupies space. If the user tries to click something beneath it, this invisible element intercepts the click and the user gets confused. Is there a CSS property that will make the element non-interactable? I'm aware there are some hacks like setting top:-999em in the .hidden class, but I'm asking if you know any elegant solutions.
You will need to transition visibility as well:
.element {
opacity: 1.0;
visibility: visible;
transition: opacity 0.3s linear, visibility 0.3s linear;
}
.element.hidden {
opacity: 0.0;
visibility: hidden;
}
An element with visibility: hidden can be clicked through; i.e. it won't intercept the click.
If you need the element to disappear altogether rather than continue to occupy space, you need to use display: none instead, but that is not an animatable property so you'll see the element disappear abruptly rather than fade out.
How can i display a easing effect, opening from the left, when the page is open? Like this site: http://focuslabllc.com/
I would use CSS transitions. Take a look at the example I've created http://jsfiddle.net/ZL9m7/1/
Relative CSS is simple as
.container {
opacity: 0.1;
transition: opacity 1s linear;
-webkit-transition: opacity 1s linear; /* Play with timing functions */
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
}
.container-ease-in {
opacity: 1;
}
And tiny javascript trigger (jQuery for convinience):
$(function() {
$('.container').addClass('container-ease-in');
});
Like in dfsq-answer the animation will be triggered with a class by js (this time without jquery):
window.onload = function() {
var oElement = document.getElementById('content');
oElement.className = oElement.className + ' start_animation';
};
And the css changes the margin and the opacity with transition(-duration):
#content {
...
/* starting status */
margin: 10px 200px 10px 0px;
opacity: 0;
/* now set the animation duration */
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
}
#content.start_animation {
margin: 10px 100px; /* change horizontal margins */
opacity: 1; /* change opacity */
}
Also see this example.
This is the fella who wrote the js for the site you're referencing. I played with CSS as an option for this but ended up just going with jQuery 100%. I'll have a blog post soon about some of the dev aspects of our new site facelift and I'll talk about how we did that. It will inclue some jsFiddle demos etc.
You can hide your content initially (with CSS) and then, once the page content is loaded, use javascript to trigger/run an easing operation to make things visible.
Or, you can start with no content and build the page content with javascript in a way that reveals it with the easing you want.
You can use JQuery animation or YUI transition to achieve this. Hide the div and show it OR set the width to 0 and then animate it to maximum with a specific duration.