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);
}
}
Related
I am trying to implement flip animation. Here is the sample link: http://animista.net/play/basic/flip
and this is the class:
.flip-horizontal-bottom {
-webkit-animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
/**
* ----------------------------------------
* animation flip-horizontal-bottom
* ----------------------------------------
*/
#-webkit-keyframes flip-horizontal-bottom {
0% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
100% {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
}
#keyframes flip-horizontal-bottom {
0% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
100% {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
}
It works fine in Chrome and Firefox but does not work at all in IE11. What changes would I require to make it work in IE 11?
From their "How to" notes:
Also, some of the animations are experimental and may not work as expected in older browsers no matter how you prefix them. Use your own judgement or better yet – consult the super-useful caniuse.com to check for browser support.
Besides, they don't provide the complete code as far as I can tell. They have a perspective:500px on their animation stage wrapper (in the demo) which makes it all work, and I don't see it mentioned anywhere in the download example code.
Even after you add it, I doubt it will work in IE, as it lacks support for transform-style:preserve-3d, as pointed out in the answers here.
I made a simple animation using CSS keyframes. But it does not work in IE and Firefox. 'background-image' is not displaying in both browsers. How can I make this work in both browsers without using background-position?
#keyframes back{
0% {
background-image: url('../images/gandhi.jpg');
transform: scale(1.5);
}
50% {
background-image: url('../images/cv.jpg');
}
100% {
background-image: url('../images/apj.jpg');
transform: scale(1);
}
}
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
now that firefox 4 is out I want to get some of my sites that have a chrome animation, working in firefox. I have got all the simple animations working in firefox (rotate, movement etc), but don't know if it's possible to do keyframe animation like it is in chrome(webkit)?
An example of a chrome animation is below
#-webkit-keyframes "sway" {
0% { -webkit-transform: rotate(0deg);}
25% {-webkit-transform: rotate(-2deg); }
50% {-webkit-transform: rotate(2deg); }
75% {-webkit-transform: rotate(-2deg); }
100% { -webkit-transform: rotate(2deg); }}
I animate this with "-webkit-animation-name: "sway" " . Simply changing all prefixes to moz doesn't help. Any info would be great.
Many thanks
Nick
Firefox does not yet support CSS Animations, follow bug 435442 to track the development progress. The bug is fairly active so I'd guess they're trying to get this into the next release.
As robertc said, there are no css animations in Firefox yet, only transitions. If your animation is just a shaking box like you have in your css, you would achieve it easily chaining the transitions with a little bit of javascript...
Your css:
#yourdiv {
-moz-transition: all 200ms ease;
}
Your Javascript:
//onload body
var element = document.getElementById("yourdiv");
element.style.MozTransform = "rotate(2deg)";
element.addEventListener("transitionend", function(){
var rotate = (element.style.MozTransform == "rotate(2deg)") ? "rotate(-2deg)" : "rotate(2deg)";
element.style.MozTransform = rotate;
}, false);
I haven't actually tested it in Firefox, but here's a working version for webkit:
http://jsfiddle.net/J6SMb/