I was wondering why my CSS transition effect looks great in Firefox and very "jumpy" in IE and Chrome. I'working on this one all day now and I can't see why this is happening. I tried backface-visibillity but that also doesn't work. I'm completly stuck on this one...
What I have is this:
<div class="stickyWrap">
<div id="header">content</div>
<div id="nav">content</div>
</div>
CSS:
#header{
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
padding: 20px 0;
}
.stickyWrap.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
.stickyWrap.sticky #header {
padding: 5px 0;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
The best way to explain is to open this test site in FF, Chrome and/or IE.
Can anybody see what I'm doing wrong? Is it about the stickyWrap div?
If you are looking to simulate the smoothness of native app animation you can still trick the browser into enabling GPU rendering. Just add this CSS line of code
.myAnimatingClass{
transform: translate3d(0,0,0);
}
Related
Css Transition effects on my website don't work in safari (tested on latest version). And transition is working well in others browser tested in Chrome, firefox, and Opera.
My code is the following:
.navbar-inverse ul a{
overflow: hidden;
-webkit-transition: color 0.5s;
-o-transition: color 0.5s;
-moz-transition: color 0.5s;
transition: color 0.5s;
}
.navbar-inverse ul a::before{
-webkit-transition: top 0.5s;
-o-transition: top 0.5s;
-moz-transition: top 0.5s;
transition: top 0.5s;
}
How to fix it? After that transition works in safari too.
The problem is that you placed the transition property for the element with the pseudo element before. Try placing the transition property for the element itself. This is what I mean:
.navbar-inverse ul a{
overflow: hidden;
-webkit-transition: color,top 0.5s;
-o-transition: color,top 0.5s;
-moz-transition: color,top 0.5s;
transition: color,top 0.5s;
}
I have created hover transition image with css. But when i hover over the first or secont image then other images pixel is changing in an instant. What is that and what is the solution for it ?
I have created this DEMO from codepen
This is transition css for my images :
.abo_im {
float:left;
width:170px;
height:150px;
overflow:hidden;
-webkit-transition: all .3s ;
-moz-transition: all .3s ;
-ms-transition: all .3s ;
-o-transition: all .3s ;
transition: all .3s ;
}
.abo_im img {
width:100%;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
}
.abo_im:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
Use backface-visibility on the img, this will fix it.
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
Demo Here
Just add -webkit-backface-visibility: hidden; to your .abo_im img
.abo_im img {
width: 100%;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
-webkit-backface-visibility: hidden;
}
See it here
Why this doesn't work only on IE11? In FF and Chrome it is fine
.js-search-item {
width: 30px;
padding: 0px;
margin: 0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
http://jsfiddle.net/tkyzv3na/3/
You need to update your jQuery version. Problem has nothing to do with the code you're showing. transition works fine in IE10+. You don't need -ms-transition ever.
jQuery#1.10.0 doesn't appear to work in IE11 within JSFiddle. Bumped to jQuery#1.11.0: http://jsfiddle.net/tkyzv3na/3/
I've added tabs to my site using CSS and according to this demo:
http://www.onextrapixel.com/examples/pure-css-tab-with-fade-animation/index4.html
However, chrome and firefox behave differently in regards to the animation.
Once you revisit a tab, firefox doesn't play the Fade-In animation again - chrome does.
How can I tell firefox to play the animation again?
JSFIDDLE: http://jsfiddle.net/h5W33/
important part:
.tabs label {
display: block;
padding: 10px 20px;
cursor: pointer;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
[id^=tab]:checked ~ [id^=tab-content], [id^=tab]:checked ~ [id^=tab-content] > div {
display: block;
}
Original Question... updated working code below:
I have a loading image which comes up during an ajax load event. The image shows/hides by adding or removing a "loading" class to the body element. Currently, the loading image animates background-size from 0 to 100%, and fades in the opacity (vice versa for the 'return' transition).
What I want to accomplish, though, is to have the background-size transition happen instantly (not transition) on the fade out, so:
Fade in: opacity from 0 to 1 in .2s, background size from 0 to 100% in .2s
Fade out: opacity from 1 to 0 in .2s, background size from 100% to 0 should happen instantly
#loader {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
-moz-opacity: 0;
transition: all .2s ease-in-out
}
#loader .image {
width: 400px;
height: 138px;
display: block;
position: absolute;
z-index: 2000;
top: 50%;
left: 50%;
margin: 0;
background: url(assets/images/loading.png) no-repeat;
background-size: 0 0;
transition: all .2s ease-in-out;
-webkit-animation: pulse 400ms ease-out infinite alternate;
-moz-animation: pulse 400ms ease-out infinite alternate;
-o-animation: pulse 400ms ease-out infinite alternate;
animation: pulse 400ms ease-out infinite alternate
}
.loading #loader {z-index: 1000; background-color: rgba(255,255,255,.7)}
.loading #loader .image {
background-size: 100% 100%;
margin: -69px 0 0 -200px;
transition: opacity .2s ease-in-out
}
I've changed transition property for this selector .loading #loader .image to "opacity" rather than "all", but it still performs the background-size transition.
Does anyone know how to achieve the different fade in and fade out transitions described above with css3? Thanks!
Updated Working Code
The issue was breaking out the individual properties (margin, background) into a comma separated list. I believe using transition: all will prevent you from being able to do different IN and OUT transitions.
#loader {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
-moz-opacity: 0;
.transition(opacity,.4s);
}
#loader .image {
width: 400px;
height: 138px;
display: block;
position: absolute;
z-index: 2000;
top: 50%;
left: 50%;
margin: 0;
background: url(assets/images/loading.png) no-repeat;
background-size: 0 0;
-webkit-transition: margin .4s ease-in-out;
-moz-transition: margin .4s ease-in-out;
-o-transition: margin .4s ease-in-out;
-ms-transition: margin .4s ease-in-out;
transition: margin .4s ease-in-out;
-webkit-animation: pulse 400ms ease-out infinite alternate;
-moz-animation: pulse 400ms ease-out infinite alternate;
-o-animation: pulse 400ms ease-out infinite alternate;
animation: pulse 400ms ease-out infinite alternate
}
.loading #loader {z-index: 1000; background-color: rgba(255,255,255,.7)}
.loading #loader .image {
background-size: 100% 100%;
margin: -69px 0 0 -200px;
-webkit-transition: background .4s ease-in-out, margin .4s ease-in-out;
-moz-transition: background .4s ease-in-out, margin .4s ease-in-out;
-o-transition: background .4s ease-in-out, margin .4s ease-in-out;
-ms-transition: background .4s ease-in-out, margin .4s ease-in-out;
transition: background .4s ease-in-out, margin .4s ease-in-out;
}
Here is a simplified test case:
div {
background: blue;
opacity: 0;
transition: opacity 2s ease-in-out;
}
div.loading {
opacity: 1;
background: red;
transition: opacity 2s ease-in-out, background 1s ease-in;
}
Notice how the opacity fades the same in and out, but the background only fades in, and immediately turns blue on fade out.
I used :hover as an example, but it should work the same when adding and removing classes with JavaScript.
Demo
If you'd like a more specific example please provide a reduced test case on dabblet or Jsfiddle.