I have a problem with CSS animation. Animation works great in IE10 (and Chrome, Mozilla, Safari), but doesn't work in IE9 (and also IE edge).
This is my CSS:
.tossing07{
-webkit-animation-name: tossing07;
animation-name: tossing07;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#-webkit-keyframes tossing07 {
0% {
-webkit-transform: rotate(-25deg);
}
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-25deg);
}
}
#keyframes tossing07 {
0% {
transform: rotate(-25deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-25deg);
}
}
It's normal, animation work since Ie10 look at can i use page, sorry
CSS animation is not supported for IE9 or earlier. Thats why your css animation is not working. Even vendor prefixing would not work.
Related
I use this css code to be able to scroll text automatically if it takes up to much space on the page. Using a javascript function which adds the class below if it does.
The scrolling works great, but I have performance issues. It moves pretty inconsistent. A bit choppy and laggy. Is there anything I can do to make it scroll smoother?
I have tried on Chrome and Firefox on Windows, but also Chrome and Firefox on Android, and performance on Android is far worse.
Example: https://jsfiddle.net/zc12L4ka/
.vscroll {
position: absolute;
height: auto;
/* Starting position */
-moz-transform:translateY(100%);
-webkit-transform:translateY(100%);
transform:translateY(100%);
/* Apply animation to this element */
-moz-animation: scroll-up 25s linear infinite;
-webkit-animation: scroll-up 25s linear infinite;
animation: scroll-up 25s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scroll-up {
0% { -moz-transform: translateY(100%); }
100% { -moz-transform: translateY(-100%); }
}
#-webkit-keyframes scroll-up {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(-100%); }
}
#keyframes scroll-up {
0% {
-moz-transform: translateY(100%); /* Browser bug fix */
-webkit-transform: translateY(100%); /* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%); /* Browser bug fix */
-webkit-transform: translateY(-100%); /* Browser bug fix */
transform: translateY(-100%);
}
}
I have an animation that works fine on Firefox, Chrome but does not work on Safari and Edge.
The animation objects are contained in a svg file loaded with js.
The idea is that elements appear in succession at the center of screen and then move up to their intended final location.
An example of the css I use to achieve this is:
#-webkit-keyframes move-you {
0% {
opacity: 0;
-webkit-transform: translate(450px,400px);
transform: translate(450px,400px);
}
50% {
opacity: 1;
-webkit-transform: translate(450px,400px);
transform: translate(450px,400px);
}
100% {
opacity: 1;
-webkit-transform: translate(450px,222px);
transform: translate(450px,222px);
}
}
#keyframes move-you {
0% {
opacity: 0;
-webkit-transform: translate(450px,400px);
transform: translate(450px,400px);
}
50% {
opacity: 1;
-webkit-transform: translate(450px,400px);
transform: translate(450px,400px);
}
100% {
opacity: 1;
-webkit-transform: translate(450px,222px);
transform: translate(450px,222px);
}
}
.svgLoaded #you {
-webkit-animation: move-you 1s ease-in 3s;
animation: move-you 1s ease-in 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
So, this works fine on Firefox and Chrome but the translation does not happen in Safari and Edge. Not a massive problem if large screen are used as everything is still visible,
( you can see example here )
but it means that I cannot translate items to where I want them on a small screen.
I have been stack on this for more than a day, the only answer I found was about missing brackets but I checked my code and all brackets are balanced. Any help would be really appreciated.
I think this would probably work:
#-webkit-keyframes move-you {
0% {
opacity: 0;
-webkit-transform: translate(450px,400px);
}
50% {
opacity: 1;
-webkit-transform: translate(450px,400px);
}
100% {
opacity: 1;
-webkit-transform: translate(450px,222px);
}
}
#keyframes move-you {
0% {
opacity: 0;
transform: matrix(1,0,0, 1,0,0, 450, 400);
}
50% {
opacity: 1;
transform: translate(1,0,0, 1,0,0, 450, 400);
}
100% {
opacity: 1;
transform: translate(1,0,0, 1,0,0, 450, 222);
}
}
.svgLoaded #you {
-webkit-animation: move-you 1s ease-in 3s;
animation: move-you 1s ease-in 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
There are a lot of problems with animating SVGs on different browsers. They all work different.
Here are some of the problems with creating consistent animations with SVGs:
IE and Opera don't honor CSS transforms at all on SVG elements. Instead, you must assign the value to the transform attribute.
Firefox didn't honor %-based origins in early versions (in latest versions it does).
Zooming in Safari breaks the sync between %-based and px-based origins.
Firefox doesn't recognize keyword-based origins like "right bottom", and Safari alters them when the zoom is anything but 100%.
In all browsers, px-based origins are measured differently for SVG elements than other DOM elements (see below).
quotation of document on SVG transformations in css-tricks
I found that using libraries like TweenMax do a pretty good work with almost all the browsers.
Of course there are some specific ways you should animate some of the properties so that they can work on IE 11. Few of them:
- Circle radius
- transitions
You can check the tips and tricks for the tool in css-tricks:
#-webkit-keyframes scaleIn {
from {-webkit-transform: scale(0);}
to {-webkit-transform: scale(1);}
}
.animate-log-in {
animation-name: scaleIn;
animation-duration: 0.5s;
}
It's working on the latest version of Chrome (Mac OSX) but not in the latest version of Safari and an older version (I think) of Chrome. Is there anything I need to add?
I noticed another Safari issue when animating scale.
Seems Safari doesn't respects your scale if the element has display: inline (e.g. is a span). Make it block or inline-block.
This isn't animation-specific. It also goes for changing the scale with no animation.
This was with Safari 9. Also with the Mobile Safari of iOS 9.
Chrome does not have this issue. It will happily change the scale of an inline element.
JSFiddle to see it in action: https://jsfiddle.net/ca64gkma/5/
Add the below code and try.
.animate-log-in {
-webkit-animation: scaleIn;
-webkit-animation-duration: 0.5s;
animation: scaleIn;
animation-duration: 0.5s;
}
#-webkit-keyframes scaleIn {
from {
-webkit-transform: scale(0);
}
to {
-webkit-transform: scale(1);
}
}
#keyframes scaleIn {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
instead of scale try zoom, for webkits values ranging from 100% as scale 1 , 1.5 = 150% and so on
I am animating an SVG element, using this code:
#bubble_1_{
-webkit-animation: bubble1 10s forwards linear infinite;
}
#-webkit-keyframes bubble1{
0%{
-webkit-transform: translate(0px,0px);
}
5%{
-webkit-transform: translate(1px,10px);
}
10%{
-webkit-transform: translate(-1px,20px);
}
15%{
-webkit-transform: translate(1px,30px);
}
20%{
-webkit-transform: translate(-1px, 40px);
}
25%{
-webkit-transform: translate(10px,45px);
}
30%{
-webkit-transform: translate(20px,50px);
}
35%{
-webkit-transform: translate(30px,49px);
}
40%{
-webkit-transform: translate(40px, 51px);
}
45%{
-webkit-transform: translate(50px,48px);
}
50%{
-webkit-transform: translate(60px,51px);
}
55%{
-webkit-transform: translate(70px,49px);
}
60%{
-webkit-transform: translate(80px, 51px);
}
65%{
-webkit-transform: translate(90px,48px);
}
70%{
-webkit-transform: translate(100px,51px);
}
75%{
-webkit-transform: translate(110px,49px);
}
80%{
-webkit-transform: translate(120px, 51px);
}
85%{
-webkit-transform: translate(130px,71px);
}
90%{
-webkit-transform: translate(131px,100px);
}
95%{
-webkit-transform: translate(129px,120px);
}
100%{
-webkit-transform: translate(131, 140px);
}
}
But, when it comes to an end, I can see it going back to it's initial position. That is strange, because transition between 100% and 0% should occur instantly, right? I need that kind of behavior, I don't want it to be seen going back.
Does anyone know what I should do? I tried with 'forwards' and 'backwards', it doesn't work.
It looks like you are just missing px on your 131, 140px setting at 100% keyframe, that should then make it instantly jump back to its starting position once finished (which I think is what you want).
If you need it to stop after one play then you need to add -webkit-animation-iteration-count: 1; and remove the infinte off your animation.
The animation-fill-mode property is not supported in Internet Explorer 9 and earlier versions.
you have to use -webkit-animation-fill-mode: forwards; to do this effect like so :
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 3s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation: mymove 3s;
animation-iteration-count: 2;
animation-fill-mode: forwards;
}
this is an example LINK
-webkit-animation-iteration-count: 1; // you will need this to set the iteration at 1
I have the CSS below that does a rotate and fade-in and it works just fine. The rotate/fade is timed just like I want it but I'd like a longer duration between the rotate/fade -- like 30s or so. If I increase duration, that slows the rotate/fade too much. How do I set the keyframes to retain the rotate/spin timing but allow 30s between the rotate/fade? I searched but couldn't find an applicable answer. Thank you very much.
#-webkit-keyframes SomeName {
0% { opacity:0; -webkit-transform: rotateY(180deg); }
50% { opacity:0; -webkit-transform: rotateY(180deg); }
75% { opacity:1; -webkit-transform: rotateY(0deg); }
100% { opacity:1; -webkit-transform: rotateY(0deg); }
}
#flipBox img.flippy {
-webkit-animation-name: SomeName;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-direction: alternate;
}
p.s. FYI: This is webkit only, hence the only prefix.
Live Demo
Use this code
animation:SomeName 5s;
-moz-animation:SomeName 5s; /* Firefox */
-webkit-animation:SomeName 5s; /* Safari and Chrome */
-o-animation:SomeName 5s; /* Opera */
Hope this will help you.