I've got this transition working smoothly in chrome and safari but it is not working in firefox. In firefox it does not zoom in, but it shows the enlarged image instantly. Maybe somebody knows what's wrong...
I've made a jsfiddle for it: http://jsfiddle.net/WYfZz/
ul.polaroids_portfolio li a:hover { -webkit-transform: scale(1.75); -moz-transform: scale(1.75);
-ms-transform: scale(1.75);-o-transform: scale(1.75);transform: scale(1.75);
position: relative; z-index: 5; }
You have no -moz-transition: -moz-transform .15s linear; on ul.polaroids_portfolio a, you just have the -webkit- version.
See http://jsfiddle.net/WYfZz/5/
Also, you shouldn't forget to also put the unprefized version for transitions at the end as well (both transitions and transforms will be unprefixed in Firefox 16/ Opera 12.5/ IE 10). Same goes for box-shadow (you'd be better off using the unprefixed version instead of the prefixed ones; I can understand using the -webkit prefix to support Android or Blackberry, but Firefox supports the unprefixed box-shadow since FF4)
Related
I have a simple example (https://jsfiddle.net/5x9yLyxq) with two "tiles" that have a hover function (only css, no javascript).
The initial status of them is this
.tiles div{
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
and I then have a :hover css which looks like this:
.tiles div:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
box-shadow: 0 0 11px 3px rgba(0, 0, 0, 0.2);
}
Problem: In IE (any, even Edge) the zoom animation "shakes" (looks really bad).
Does anyone know anyway to make the animation smooth (like in Chrome), can be a js library or css I do not care, just needs to be smooth?
Thanks
I've found this to be caused by the transform-origin property, which defaults to 50%.
If you change this to a value just over that, the shakiness (magically) stops. Try adding the following to your stylesheet:
transform-origin: 50.01%;
transform-origin is well supported for IE8 and up, Edge, and all other major browsers.
Here's a working example based on the JSfiddle originally posted by #DavidDunham.
You can try this
-ms-transform: scale(1.1);
for IE 9 or greater version.
CSS transitions don't work when hardware acceleration is activated (either via will-change or via translateZ(0)) and you are animating to or from scale(0) in chrome 45. (Version 45.0.2454.85 (64-bit))
(Firefox 40 works with will-change, but not with translateZ(0))
DEMO: http://codepen.io/zapdev/pen/ojbdVb
(enable hardware acceleration and the hide animation stops working)
My current work around:
.hide {
transform: scale(0.0002);
opcacity: 0;
transition: transform 400ms, opacity 0ms 400ms;
pointer-events: none;
}
EDIT:
I am on MacOS X and my WebGL Renderer is "Intel Iris Pro OpenGL Engine"
Also: Chrome 47.0.2511.0 canary (64-bit) works (like Firefox 40) with will-change, but not with translateZ(0). Looks like will-change is generally the way to go for hardware acceleration.
The browser doesnt know how to read transform override.
when you use transform:translateZ('value'); you are override the scale.
for it to work you need to initial all div with scale and translateZ, and this way it will work in all ways.
VIEW DEMO
div{
transition: transform 400ms;
transform:scale(1) translateZ(0);
}
div:hover{
transform: scale(1.4) translateZ(0);
}
div.hide{
transform: scale(0) translateZ(0);
}
I used this code:
codepen.io/egrucza/pen/PwbzPy
It seems to work in Chrome and Firefox, but not in Safari. I have added Modernizr, but that doesn't help me out. The triangles in Safari are visible without hovering and have an odd placement. The hover doesn't do anything.
Any quick fixes?
Most probably it's because you use transform:: rotate(-45deg) translateX(0); which requires vendor prefix on Safari. Try to add:
-webkit-transition: -webkit-transform 200ms ease;
-webkit-transform: rotate(-45deg) translateX(0%);
I have a trouble, when I need to rotate big image(about 3000 - 5000px), that already scaled to 0.1 - in Firefox it goes not smooth. I think, it depends of Firefox render engine, because in Chrome, Opera and Safari everything is ok.
How do you think, is it possible to do the same in FF?
Here is jsfiddle (you need to hover on circle in FF).
.item {
width: 3000px;
height: 3000px;
-webkit-transform: scale(0.1);
transform: scale(0.1);
transition: all 5s linear;
}
.item:hover {
-webkit-transform: rotate(100deg) scale(0.1);
transform: rotate(100deg) scale(0.1);
}
Check for image-rendering css property :
https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
Unfortunately default settings are the most optimized on Firefox, and as you said this task is handled by the browser itself, so there is pretty much nothing you can do.
I am animating a heading on a site and the animation is working in firefox but not in chrome.
I have the correct prefixes in firefox, if you use this code and switch the prefixes to moz it animates absolutely fine in firefox, heres the code for chrome:
HTML
<div class="page-header-con">
<div class="page-header">
<h1>test</h1>
</div>
</div>
CSS
.page-header-con {
perspective: 100px;
}
.page-header:hover {
-webkit-transform: rotateX(360deg);
}
.page-header {
-webkit-transition: all 0s ease 0s, all 1s ease 0s, all 0s ease-in 0s, all 0s ease 0s;
-webkit-transform: rotateX(0deg);
}
Am I missing something that is specifically needed for chrome?
Chrome doesn't seem to like the multiple transitions (not sure why you'd have them in the first place), so I kept removed all the ones that wouldn't do anything, aka all the ones with 0s duration. Firefox seems to ignore these other transition values
Updated jsFiddle
In addition, you need to play around with transform-origin (and the webkit prefixed version) in order to get the effect you desire. The default, for me is seems, in Firefox is top left, so if you want Chrome to look like that you need to put -webkit-transform-origin: top left; in the hover CSS for the element
More information on transform-origin