I have a class with following properties
The transition is working fine in Chrome and in Internet Explorer but in Firefox its not working. Someone please tell me how to make it work in Mozilla Firefox also.
background-color: #fafafa;
width: 100%;
max-height:55px;
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
z-index:9999;
You should specify good transition rules and the default rule like this :
-webkit-transition: all 0.3s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
Related
I have a mobile menu that slides to the left from off the screen to the right. It works very well using the below code. However, when it's off the screen, I can actually scroll my mobile view over to the right and see it off the screen rather than not be shown at all, and the mobile screen width staying put. How do I fix this issue?
.mobile-menu {
width:200px;
border:1px solid #eee;
background-color:#f2f2f2;
height:285px;
position:absolute;
top:35px;
right:-200px;
z-index:99999;
display:none;
-webkit-transition: right 0.1s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: right 0.1s ease-out; /* Firefox 4-15 */
-o-transition: right 0.1s ease-out; /* Opera 10.50–12.00 */
transition: right 0.1s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
.mobile-on-screen {
right:0 !important;
display:block;
}
I can't see your full code, however, I would guess that what is probably missing is an overflow: hidden; on the parent div, or body.
For closed state of menu
body {
overflow-x: hidden;
}
And for open state of menu toggle a class on body
body.menu-open {
overflow: hidden
}
I'm using the following to animate a hover transition:
a {
letter-spacing: 1px;
transition: all .5s ease-in;
}
a {
letter-spacing: 2px;
}
Here is a jsBin.
At first I didn't expect this to be pretty but was pleasantly surprised when I saw how smoothly it was animated in Chrome. Even though it only changes 1px in the spacing, somehow Chrome gives the illusion of a smooth transition.
In Safari though it just jumps from 1px to 2px without that nice smoothing effect.
Is there any way to get the same effect in Safari?
(Alternatively, is there a CSS-only way of disabling this in non-Chrome browsers?)
I mis-read the entry for letter-spacing in the list of CSS Animated properties. In actual fact, any type of length unit is able to be used with the letter-spacing animation. It appears that Safari doesn't smoothly animate a 1 pixel difference - a bug.
The solution for small letter-spacing animations cross-browser is the use of em units and also a smaller delay of .1s to get a smooth transition. Safari does not have as smooth an animation for small letter-spacing animations, but it is passable.
Updated example jsBin with an em unit (Tested and working in Safari, Firefox, Chrome)
CSS
a {
letter-spacing: 1px;
transition: all .1s ease-in;
}
a:hover {
letter-spacing: 0.2em;
}
Available browser prefixes (if needed):
-webkit-transition: all .1s ease-in;
-moz-transition: all .1s ease-in;
-ms-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
transition: all .1s ease-in;
to disable it, use your code like this:
#media screen and (-webkit-min-device-pixel-ratio:0) {
a {
letter-spacing: 1px;
transition: all .5s ease-in;
}
a {
letter-spacing: 2px;
}
}
this will disable your code in any non-webkit browser (thus, will only work in Chrome and Safari). Other than that, your code works fine, Webkit has just better smoothing engine, nothing else, but Firefox and IE handle it without issues, so really don't know what are you seeing in terms of differences
in a part of my code I have CSS3 animation and it seems does not work very well on safari, but it's fine on other browsers, so, I would like to make and exception, and if the browser is safari then it ignores the animation part of the code.
Here is my code:
download-music {
background: transparent url(../images/dl-music.png) 0 0 no-repeat;
float:left;
width:110px;
height:39px;
text-indent:-9999px;
opacity:0.5;
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=40); /* For IE8 and earlier */
transition: opacity .45s ease-in-out;
-moz-transition: opacity .45s ease-in-out;
-webkit-transition: opacity .45s ease-in-out; /* EXCEPTION FOR HERE */
-o-transition: opacity .45s ease-in-out;
}
.download-music:hover {-webkit-opacity:1 !important; -o-opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
Selector hacks
1.
/* Safari 2/3 */
html[xmlns*=""] body:last-child .selector {}
html[xmlns*=""]:root .selector {}
2.
/* Safari 6- and Chrome 24- */
::made-up-pseudo-element, .selector {}
3.
/* Safari 2/3.1, Opera 9.25 */
*|html[xmlns*=""] .selector {}
Media query hacks
/* Safari 3+, Chrome */
#media screen and (-webkit-min-device-pixel-ratio:0) {}
JavaScript Hacks
1.
/* Safari 5- */
var isSafari = /a/.__proto__=='//';
2.
/* Safari */
var isSafari = /Constructor/.test(window.HTMLElement);
Source: http://browserhacks.com/
Ditch the prefixed opacity, it's been a couple of years since all browsers have supported it. It interferes with your transition declarations. This should work fine in all browsers.
.download-music {
background: transparent url(../images/dl-music.png) 0 0 no-repeat;
float:left;
width:110px;
height:39px;
text-indent:-9999px;
opacity:0.5;
filter:alpha(opacity=40); /* For IE8 and earlier */
-moz-transition: opacity .45s ease-in-out;
-webkit-transition: opacity .45s ease-in-out;
-o-transition: opacity .45s ease-in-out;
transition: opacity .45s ease-in-out;
}
.download-music:hover {
opacity:1;
filter:alpha(opacity=100);
}
I'm attempting to transition an image from a 50% grey scale filter to its filterless state on hover.
The transition doesn't work in firefox however. Is it possible to get the transition running in firefox using only css?
img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray alpha(opacity=50); /* IE6-9 */
-webkit-filter: grayscale(50%); /* Chrome 19+ & Safari 6+ */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
-moz-transition: all .6s ease;
-ms-transition: all .6s ease;
transition: all .6s ease;
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
Because the standard filter syntax is a url it's not amenable to transitioning. Gecko would have to implement the shorthands part of the under construction Filter Effects specification for this to work.
In the meantime you could do this using SVG animation but not via CSS only.
I have a #header-element with margin: 0 auto. I added a media-query:
#media screen and (max-width: 950px) {
#header {
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
margin-left: 0;
}
}
-moz and -o ignore the transition attributes: margin-left is set immediately to 0, while -webkit behaves as expected.
When using a numeral instead of auto, firefox and opera do apply the transition.
How do I make Mozilla and Opera apply the transition while still using auto?
Using -moz-transition: all 0.6s cubic-bezier(0, 0, 0.58, 1) 0s; seems to work on Firefox on Ubuntu. (That's how Opera interpreted ease-out.) Try it on Windows.