I'm trying to animate a SVG graphic with keyframes, but my animation doesn't work correctly in Safari. It's fine in Chrome and Firefox, but Safari doesn't seem to render it the way I'd like it to. I'm using the -webkit- vendor prefix on my CSS properties, but that doesn't seem to help. I have no idea what could be causing such a thing.
Here is a Fiddle link to my code.
Here is what the problem looks like:
Here is a snippet of one of the keyframes:
#-webkit-keyframes dropOne {
0%, 100% {
opacity: 0;
}
0% {
-webkit-transform: translate(6px, -6px);
}
25%, 50%, 75% {
opacity: 1;
}
100% {
-webkit-transform: translate(0px, 0px);
}
}
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 was looking at the webpage http://www.cuttherope.net on the current Google Chrome 38.0.x and saw that there are 4 icons in the middle of the page. When the mouse is over it, it has an icon squeezing effect: as if the icon is a pudding or jello squeezed on the side by a hand, and then bounce back to its natural size again.
I wonder how it is done: is it by HTML5 / CSS3, or how else is it done. I saw this div
<div class="game-icon resize"></div>
and if I use the developer tool to set display: none on it, then the icon will go away and have nothing showing, so this should be the div showing the effect, but if I examine the computed values, I do see an icon as a background, but all the computed values do not change when the mouse is over it or out of it. How is this done and is it part of HTML5 / CSS3's new features?
(if I disable JavaScript and reload the page, the effect still works, so apparently it is not done by JavaScript).
Yes, this is part of the CSS3 features (mainly transform )
If you want to have a similar effect without having to manually code it, have a look at this :
http://daneden.github.io/animate.css/
You can easily animate an element simply by adding two classes to it.
Found it! Yes, it's CSS3, and specifically the [-webkit-]animation: resize 0.2s linear; property. Disable that one and the effect stops.
I would guess it goes something like this:
img:hover {
-webkit-animation: squeeze 0.5s;
animation: squeeze 0.5s;
}
#-webkit-keyframes squeeze{
0% { transform: scale(1, 1); }
50% { transform: scale(1.1, 0.9); }
100% { transform: scale(1, 1); }
}
#keyframes squeeze{
0% { transform: scale(1, 1); }
50% { transform: scale(1.1, 0.9); }
100% { transform: scale(1, 1); }
}
<img src="http://placehold.it/100x100">
The CSS the other answers have pointed out
.resize:hover {
-webkit-animation: resize 0.2s linear;
animation: resize 0.2s linear;
}
References the following keyframe animation which is elsewhere in the CSS
#-webkit-keyframes resize {
0% { -webkit-transform:scale(1, 1) }
50% { -webkit-transform:scale(1.1, 0.9) }
100% { -webkit-transform:scale(1, 1) }
}
#keyframes resize {
0% { transform:scale(1, 1) }
50% { transform:scale(1.1, 0.9) }
100% { transform:scale(1, 1) }
}
The name resize is what links the two - it's not a keyword - you could call it boing and use
animation: boing 0.2s linear;
...
#keyframes boing {
Etc.
The keyframes say
at the beginning, scale to 100% x 100%
50% through the animation, scale to 110% x 90%
at the end, scale back to 100% x 100%
And the 0.2s in the animation property tells it to take 0.2 seconds to do the entire animation. The animation starts as soon as the style is applied, in this case when you hover.
Why certain css does not work on IE?
For Example: on this page, it work on chrome perfectly and it does not work on IE.
http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-loading-animation-loop/index.html
from the tutorial on this page:
http://www.alessioatzeni.com/blog/css3-loading-animation-loop/
I added some code on the css:
inside .ball:
{
animation-duration:1s;
animation-name:spinoff;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
new key frames:
#keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
Tested on IE11 and it is not working.
I am very confuse why it does not work on IE11...
UPDATE
It was my mistake that copy and paste the thing without realizing the mistake.
I had solved the mistake through the code below:
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Thanks for raptor to pointing out my mistake.
Try the follow to give it support to other browsers and make it work in IE
-moz Mozilla
-webkit Chrome and Safari
-o- Opera
-ms Internet Explorer
and obviously without it for older versions or non famous ones
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.