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??
Related
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.
I have a link with an element inside (let's call it Bob). Bob is the star of the link, so he wants to shine a bit differently.
The link has some CSS3 transitions to create a fade effect. Bob also has a fade effect, so he can still be the shining element of the link.
An important point is that :hover is related to the container (in the example, a div), and I need it that way.
It works great in Firefox, Chrome and IE, but Microsoft Edge doesn't like the way Bob shines. During the transition, Bob just disappears and I have no idea where he goes.
Here's an example HTML:
<div>
<a href="#1">
<span class="Bob">Bright like a diamond!</span>
<p>Random text</p>
</a>
Other random stuff, who cares...
</div>
The :hover transition is on the div, then both a and Bob have transitions. The relevant CSS is very simple, something like:
div:hover .Bob { transition: all 0.5s ease 0s; }
.Bob { transition: all 0.5s ease 0s; }
div:hover a { transition: all 0.5s ease 0s; }
a { transition: all 0.5s ease 0s; }
Then they just have different colors so you can see the fade animations
Here's a JSFiddle so you can meet Bob:
https://jsfiddle.net/Cthulhu/9vv7v6gd/
If you test it in MS Edge, you will see how Bob disappears during the transition, and we don't want that. If you change the transition times between Bob and a, it gets even weirder, but let's keep it simple for now.
Any ideas?
I had same problem today. I resolved it by more specific transition property
{ transition: all 0.5s ease 0s; }
change to something like
{ transition: color 0.5s ease 0s; }
The way to fix this is by adding the transition result to the element.
div:hover a {
/* for example, if blue text was the desired transition. */
color: blue;
}
This is 2019. Problem has been solved by Microsoft and Edge behaves in this situation just like any other browser.
Case closed.
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{}
And to the point, in one of my apps client got a transition bug, in chrome, latest version - when he loads the page css transtions are not working at all, then , when he scrolls, or does some different stuff for some time transitions are back on, and some time later they are not working again (Video of it). Transition example:
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
And the site itself.
P.S. I can't reproduce bug on my pc, or any pc I have access to, but client have it on 2 of 5 pc. Any help will be appreciated.
We have two computers out of fifty that have this Chrome bug too.
https://code.google.com/p/chromium/issues/detail?id=451756
This is fixed in version 40.0.2214.115
I saw in your stylesheet that you :hover selector set on :after pseudoselector, for ex. (line 468 style.css):
.news ul li a:hover:after
On some chrome versions that might not work , to make it work you need to declare the hover by itself;
try:
.news ul li a:hover {}
.news ul li a:hover:before { /* This works (needs :hover declared) */ }
I couldn't reproduce the bug muself because I believe this was fixed on new chrome versions_
I have a CSS file separate from the main CSS file for a page. Essentially there are three hyperlinks each with their own p tags, one under the other, and each has their own divs for specifying the webkit transition color for when they highlight. The colors all work great until the end of the webkit transition, at which point all three links change color to the color specified in the last class on the CSS (gray). I tried excluding that last class, and sure enough, the final color for all links became the color specified in the new "last class" (blue).
This happens only when I have visited the link, works fine when I clear cookies and don't click on any of the links. So it seems like something with a:visited, but as you can see, I have that covered (I think...).
Here's the CSS:
.orangelink a:link:hover,a:hover,a:visited:hover {
color: #cc7839;
text-decoration:none;
/* font-weight:bold; */
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
}
.bluelink a:link:hover,a:hover,a:visited:hover {
color: #7290a4;
text-decoration:none;
/* font-weight:bold; */
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
}
.graylink a:link:hover,a:hover,a:visited:hover {
color: #b0afaf;
text-decoration:none;
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
}
Seems like I'm missing something small... To be clear, there is no interference from the main CSS file, a isn't defined at all except for the color of hyperlinks when they are inactive.
In your declarations, you only state the parent's class of the a:link:hover...
.graylink a:link:hover,
.graylink a:hover,
.graylink a:visited:hover{
color: #b0afaf;
text-decoration:none;
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
}
This will make the gray behave correctly, do the same for other colors and bingo.