I am working on a Drop-Down-Menu only using CSS & HTML5 (no JavaScript) in my personal website. Here it is: http://davidvalles.cu.cc
If you enter with Firefox, the menu works great (it is the one called "Secciones"): when you put the mouse over the "Secciones" div, the menu appears with a transition.
But if you try it with Safari or Chrome, it will work normally, unless you put the mouse UNDER the "Secciones" div. In that case, menu will appear normally. And I don't want the menu to open in that case. I only want it to open when you put the mouse over the "Secciones" link (all the box that contains the Secciones text).
What am I doing wrong? Why does the menu work perfectly in Firefox but not in Safari?
Could you take a look at it? Thank you, and sorry for my poor English, I'm learning. Please, correct me :)
Your easing? Is "ease" a easing value?
-moz-transition: opacity .25s ease;
-webkit-transition: opacity .25s ease;
-o-transition: opacity .25s ease;
-ms-transition: opacity .25s ease;
transition: opacity .25s ease;
Related
I have an icon that, once tapped, opens a sidebar. I'm using this CSS3 transition:
transition: transform .2s ease-in-out;
The sidebar is not working on BlackBerry devices but when I visit http://tympanus.net/Development/SidebarTransitions/ these sidebars works properly on a BlackBerry device.
The only difference in the animation is that the tympanus one has not the ease-in-out rule but just transition: transform .2s;
Any suggestions or other things to check?
I am having some trouble with the transition property trying to include the all keyword.
I've included a fiddle and I feel I'm either making a simple (or stupid) mistake or something? I've seen the all keyword work fine? And it seems to working fine on the .on class when selecting them?
Why is the base classes that use the
// not working
transition: 0.2s transform, 0.2s all 0.4s;
// working
transition: 0.2s transform, 0.2s top 0.4s, 0.2s margin-top 0.4s;
https://jsfiddle.net/us2196np/2/
I think it's about priority
look
transition: 0.2s all 0.4s, transform 0.2s ;
i mean fisrt it sets transition to all styles then it rewrites transform
I have a problem which I really hate.
In Chrome all my select elements in my forms are erratic.
When I click on the select and then move cursor down then the
focus jumps on the elements very strangely.
If I wait about 1 second after clicking on the select box then
the behaviour is OK, the focus is on the same element as the cursor (which is not the
case if I don't wait)
Just pure HTML no JS.
All forms are Zend Forms.
FF, IE, Opera are OK
Thanks,
David
Finally I have found it.
I my CSS
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear
changed to 0.01 and now everything is OK.
Regards
I use modal windows on html5 for my menu, but transition doesn't work. Help me find my errors.
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
and here is example in online redactor
Your display: none is hiding the dialog immediately, before the transition starts.
You need to remove the display:none in .modalDialog and set the opacity to 0.
I'm having some trouble with the CSS transition property with absolute links in the href in Chrome on my Mac.
I have
a {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a { color: #333;
a:hover { color: #c3dd11; }
and
Link fades
Link fades
<div id="header">
<nav>
Link doesn't fades
</nav>
</div>
Here's a JS fiddle: http://jsfiddle.net/bYBxC/
Any ideas why this isn't working?
I get the same thing. I couldn't work out what it was that all non-working links had in common. Reading you're question I thought "Aha!" but I've just checked and some absolute url's are showing the transitions just fine. What I have noticed though is that the absolute urls that don't have www. at the beginning don't show the transition but the ones that do, do. I notice in your example there is no www. in front of the domain name. Try adding that and see if it works. This appears to be a Chrome bug.
Edit
Just been playing around with the fiddle and both links are showing the transition regardless of the url. That wasn't the case at first. Very strange bug indeed.
Bug is fixed in the latest version of chrome.