http://jsfiddle.net/cJrgB/
The hyperlinks in #shortcut-bar are given -webkit-transition: background .25s ease-in-out. But it doesn't work. I also tried with all .25s ease-in-out
The lines of code corresponding to my problem are under:
/* vvvvvvvvvvvvvvvvvvvvv here vvvvvvvvvvvvvvvvvvvvv */
PS: Please explain to me what ease-in-out ease-in ease-out ease etc mean
PS2: Also, which place is beter for transition property, in :hover pseudo-class or in its general area, the one without :hover
Ad main question: I think transition doesn't work with gradients.
Ad PS: see CSS3 Transitions
Ad PSS: if you add trasition to :hover it will only be active on :hover, so when you 'unhover', there will be no transition at all.
Related
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.
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/
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 am trying to make some kind of animation and I want it to happen without :hover :active or any other event. I want it to happen after 2 second page loads. In fact, I want the object come from invisible place to scene (visible area). Is there anyway of doing it ?
#scene {width:650px;height:300px;border:1px solid black;background-color:#FAFAFA;margin:0 auto;}
#sca {transition: background 2s;width:271px;height:180px;background: url(http://img521.imageshack.us/img521/7913/123hc.png) no-repeat;display:block;position:relative;right:300px; opacity:0.5;
transition: opacity 2s;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s; /* Opera */
transition-delay: 2s;
-webkit-transition-delay: 2s;
}
#sca:hover {opacity:1; }
Yes it's possible, but it's not recommended. How to do it with pure CSS is shown at this site. Here is the demo provided at the site.
A more cross-compatible way of doing it would be using javascript or jQuery, specifically jQuery's ready combined with animation or more generally, effects.
Good luck!
CSS transitions work on events, and there's not any way around that. You'd have to use Javascript to do what you are looking for.
There is difference between transition (from title) and animation (from text). animation can have start without an event, but transition can't.
Simple enough question:
Is it possible to leverage css transitions when it would would not be appropriate/feasible to trigger animations via pseudo selectors (ie :hover, :active, etc)?
My use case is I want something to animate after form submission. I was thinking I would be able to do something like:
.success_message { ...transition stuff + opacity: 0 }
.success_message.shown { opacity: 1 }
Then using javascript, I would add the shown class to this element I want to animate.
Why not just use jQuery or similar to animate? I'm glad you asked. The CSS Transitions are much smoother on the iPhone and other mobile devices, which are the platforms I'm targeting. Currently I'm doing animations with jQuery, but they're just not as smooth as they could be.
Edited to clarify what I was asking about pseudo-selectors.
Everything should work as you expect. JSFiddle: http://jsfiddle.net/ghayes/zV9sc/12/
.success_message {
opacity: 0.0;
transition: opacity 0.3s linear;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
}
.success_message.shown {
opacity: 1.0;
}
If this does not solve your issue, please include further code samples or browser specifics. Good luck!
Yes, you can do that. Css transitions work any time a css property changes, even if it was because the class changed.