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);
}
}
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 am trying to animate an element's transform property, but I noticed it's not working as I expect on IE (surprisingly).
when animating from
0% { transform: translateX(-50%) translateY(150px); }
to
100% { transform: translateX(-50%); }
It seems to ignore the translateX(-50%);
This is the way I use the animation on the html element (I use forwards so the final state of the animation is the one that remains applied to the element):
animation: myanimation 1s ease-out forwards;
I've being trying to solve this for a while, even trying from translate(-50%, 150px) to translate(-50%, 0px) but still it won't work.
Here's a working fiddle to quickly see the difference. It works well on Chrome, but misbehaves on IE.
use transform: translate(X, Y) it works on IE ( use vendor prefix for IE9 -ms-transform )
#keyframes myanimation {
0% { transform: translate(50%, 150px); } /* i suppose -50% is a typo, if it's not replace it with -50% */
100% { transform: translate(-50%, 0); }
}
#anim {
display: inline-block;
animation: myanimation 1s ease-out forwards;
}
<h1 id="anim">Hello World</h1>
You want to animate X from -50% to -50%? If you want to animate the Y coordinate, then set the value on your target percent.
100% { transform: translateX(-50%) translateY(0); }
why not? This works on IE. I've tested.
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);
}
}
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