Yesterday I got my problem solved about jquery, which didn't load correctly. Today I struggle with yet another problem: two transitions for one element. The first transition starts when the page has loaded: it fades in. This one actually works when I do not use my second transitions. My second transitions must start whenever someone hovers over the ul. The problem is that the hover transitions 'overwrites' the fade-in transition. My jsFiddle:
http://jsfiddle.net/2cpX6/6/
Thanks in advance.
CSS rules with the same name override each other, just like any other rule.
Try this:
transition: opacity 2s ease-in, color 0.3s ease-in-out;
Note that you only need transition and -webkit-transition, since Firefox and Opera now fully support the unprefixed version, and -ms-transition never existed.
You can't put the same CSS rule for the same ruleset without it being overwritten. This applies to everything. For example, if you had:
span {
color: red;
color: green;
}
The spans would be green. This means that you cannot stack transition rules for the same ruleset.
You can create multiple separate transition rules using a comma.
transition: opacity 2s ease-in, color .3s ease-in-out;
http://jsfiddle.net/ExplosionPIlls/2cpX6/7/
Related
I am using the "just me" effect from here, however I am having problems with Safari v5.1, it just doesn't render the modal. When inspecting I can see that the modal should be there but it just stays transparent. Is there any trick to force the browser to re-render?
EDIT: I have also checked the css properties that are being used and they are supported.
EDIT2: Here's the link in case it's hard to see http://tympanus.net/Development/ModalWindowEffects/ , I am using exactly the same code and the highest z-index.
To anybody interested:
In this case the transition is transition: all .3s ease; but Safari has problem when it has to transition opacity and visibility at the same time. Changing to transition: opacity .3s ease, transform .3s ease; (with all necessary prefixes) fixed it.
.faded{
opacity: 1;
}
This worked for me.
I'm trying to make it so that when a link has been visited, it is persistently a certain color AND a certain opacity that matches non-visited links when WebKit fully transitions them.
Using this:
a:visited {
color:#cc7839;
opacity:0.1;
}
I can get the visited links to always be that color, except opacity isn't doing anything. I set it to 0.1 to make it easier to see if it was working.
When I hover over a visited link, it transitions to the opaque color set by WebKit for a:link:hover.
Here's the CSS that's in another file for setting all links:
a:link:hover,a:hover,a:visited:hover {
color: #cc7839;
opacity:0.8;
text-decoration:none;
-webkit-transition:all 0.5s ease-in;
-moz-transition:all 0.5s ease-in;
}
I'm thinking I have to change something with the latter CSS in terms of which a elements it specifies?
Not possible. You can only use the :visited selector to change the color of an element. Thus opacity doesn't work.
SEC7115
:visited and :link styles can only differ by color.
Reference here - Was unable to find W3 documentation stating it..
I have this JS Fiddle that works well, making my custom title display on mouseover and hide on mouseout. The problem I am having when transporting it to real world environment is that the ~ tilde selector doesn't work anymore. Is there another way to do this? My .message div is at very end of page ( as I had to close SVG tags first ), so I know the + plus selector won't work.
I realized that the real problem on my webpage as opposed to the fiddle is that my button class items are svg elements and while the tilde targeting works properly if the two elements are non svg, it doesn't work properly if one element is svg and the other isn't.
I added an svg element of the same class "button" to the Fiddle to demonstrate this issue.
If anyone can show me how to properly target this, I will be most grateful.
JS Fiddle Here
.button:hover ~ .message {
opacity: 1;
transition: opacity .6s ease-in;
-moz-transition: opacity .6s ease-in;
-webkit-transition: opacity .6s ease-in;
}
Am I missing something? Is there a reason you can't just apply class="button" to the SVG? It seems to achieve what you are after.
Demo here
Update
Instead of trying to achieve the message show with pure CSS, just use a little extra jQuery. Add a class to the message element when you mouseover "button".
$('.message').addClass("visible-message");
Then remove it again when you mouseout.
Demo here
Please can somebody explain the following.
I believe that a transition can be triggered by, for example, hovering.
My hover style should contain the CSS that I want my element to have at the end of the transition (in this case color:red).
The browser will then transition from the original css to the hover css using the time duration specified on the original unhovered css.
a{
color:blue;
transition: color 1s;
}
a:hover{
color:red;
}
This works perfectly.
BUT what if I want the transition from non-hover to hover to be instant? From experimenting, it appears to work if I add transition: color 0s; to my hover css. But to me this doesn't make sense, because my a css still has the 1second duration. If anything, I would expect adding this would cause a 1s transition on hover and a 0s transition when the mouse is moved away.
Can somebody explain where my understanding is wrong?
It's the duration of the transition to that state.
So adding 0 to hover means it will be a 0s transition to the hover state and then a 1s transition back to non-hover.
If it's only on the original non-hover then the transition applies to both.
this is the situation. If you make that opposite, it works perfectly.
Test
css:
a{
color:blue;
transition: color 0s;
}
a:hover{
transition: color 1s;
color: peachpuff;
}
see jsfiddle.
Enjoy!
(For browsers that support CSS transitions, including the latest versions of Firefox, Safari, and Chrome. Strangely, this issue does not appear in Opera.)
Has anyone else noticed this? When you put a color transition on a:link, the a:visited transitions to the a:link color before displaying the a:hover color. Check it out:
http://jsfiddle.net/Mgzv9/2/
Can this color flicker be avoided?
I have been banging my head around this problem for a while.
The thing is, that this problem is actually hard to reproduce.
OK, so what happens, sometimes while loading/refreshing a page with color transition on links, the color is first transitioned from the default browser link color, to the CSS defined color. It actually doesn't happen for me, when I open the HTML from disk, but if I put it in a server (even local server), then this problem shows up.
To reproduce the problem, create an HTML, add a stylesheet and define a transition for links, something like this:
a {
color: red;
-webkit-transition: color .5s linear;
-moz-transition: color .5s linear;
-o-transition: color .5s linear;
-ms-transition: color .5s linear;
transition: color .5s linear;
}
a:hover {
color: green;
}
...and then include the stylesheet in your HTML.
Put the files on a server, and try opening the page in Chrome, try refreshing the site, sometimes you should first see a transition from the default blue color, when the pages loads.
After deconstructing some sites, where there seemed to be no problem with this, I came up with this simple solution.
If you include some Javascript files too, then just place Javascript includes AFTER your CSS includes.
It even work if you just include an empty JS file, after you stylesheet.
Hope this helps!
I never seen it happen while using color. But yea it happens when using images in baground.This is bcoz of the loading time, and can be avoided by using all the transition images in one big image and use baground-position property to control the image.