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?
Related
Alright Google isn't helping me out much here.
The aim of the game is to have a button, which is a custom png, and upon mouse rollover it 'slides upwards', remaining in the same spot but transitioning to the rollover by means of sliding.
Preferably I'd like to get this sorted using CSS3, the page already has a bit of an OTT fest of JQuery.
Currently I've only managed to get it to slide from the left side. Downwards is fine too.
Code is about as simple as it comes, the HTML looks like this (Just a basic DIV):
<div id="Abutton"><a draggable="false" title="A button n' stuff"></a></div>
The CSS:
#Abutton a {
background: url(mediafolder/Abutton.png) no-repeat 0% 0px;
display: block;
height: 32px;
width: 86px;
cursor: pointer;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
#Abutton a:hover {
background-position: -86px 0%;
}
(Plus a further # for the positioning and size etc..)
If it makes for any complications the button is also tied to a JQuery file that upon clicking, smooth scrolls to a different point in the page (Props to the awesome chap that helped me out with that last night!).
Thanks in advance!
I think what you're asking is a slot machine display type feel?
Just use an image sprite, which you pretty much already are trying to do, and put a css animation on it, and it will look what you want (which i think is what you want?) Best of luck
.animate {
-webkit-transition: all 0.250s -in-out;
-moz-transition: all 0.250s ease-in-out;
-o-transition: all 0.250s ease-in-out;
transition: all 0.250s ease-in-out;
}
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;
I'm trying to make smooth animations on buttons by implementing CSS3's transition properties. The buttons smoothly go from dark green to light green in Firefox, Safari, and Opera (IE doesn't support transitions anyways).
But for some reason, in Chrome, if you hover over one button and then immediately hover over another, the colors seem to lag. Sometimes I get a neon green button, sometimes I get a black button; something happens whenever I run the mouse too fast from one button to the next. Can Chrome just not keep up with the transitions or something?
Barebones code I'm using:
.button {
transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-webkit-transition: background-color 0.2s;
background-color: #466b46;
}
.button:hover {
background-color: #74d06c;
}
Chrome is Version 24.0.1312.56. Any help would be appreciated.
if I clearly understand your problem you want a smooth transition in chrome when you hover a button ?
For that change your code like this :
.button {
transition: background-color linear 0.2s;
-moz-transition: background-color linear 0.2s;
-webkit-transition: background-color linear 0.2s;
background-color: #466b46;
}
.button:hover {
transition: background-color linear 0.2s;
-moz-transition: background-color linear 0.2s;
-webkit-transition: background-color linear 0.2s;
background-color: #74d06c;
}
with this code, if you change the hover over a button, you have also a smooth transition to back to the initials parameters.
I hope that this will help you.
-webkit-transition:background-image 0.6s ease-in;
-moz-transition:background-image 0.6s ease-in;
-o-transition:background-image 0.6s ease-in;
transition:background-image 0.6s ease-in;
On the above code, I've already tried safri,firefox and chrome, ONLY firefox doesn't work. I checked on the web, people say firefox is not support this, but I just want to be make sure, are there any other methods can be done in firefox, or else I have to create a javascript controlled animation just for firefox.
According to MDN, background-image transitions are not supported yet. However, you can fall back to using image sprites and animating the left property if you want sliding, or layers of images and animating the opacity property.
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.