I've exhausted every resource on this I can find and cannot find a solution. I am trying to animate opacity and the Y coordinate for a graphic with IE 11 as the browser.
Opacity works fine (the graphic fades in and out) in IE 11, transform does not work in IE 11. In Firefox, both work.
Here is the CSS:
#keyframes
pulse
{
0%
{
opacity: 1.0;
transform: translateY(+5px);
}
45%
{
opacity: .20;
transform: translateY(-5px);
}
100%
{
opacity: 1.0;
transform: translateY(+5px);
}
}
#blink_layer {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: pulse;
}
I know TRANSFORM is supported in IE 11 and does not require any prefix.
How can I get TRANSFORM to work in IE? What might be breaking transform here?
Related
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 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.
I do not understand the difference between -webkit-animation and -moz-animation. What is the difference in between the two or these, or are the same?
I googled this question but couldn't find out the differences.
Here is the code example:
.blink_me {
font-size:60px;
font-weight:bold;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1.5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#-moz-keyframes blinker
{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#-webkit-keyframes blinker
{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes blinker
{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
Here in this code -webkit-animation ,-moz-animation and at last the simple animation is used why these three are being used with same functionalities?
These are the vendor-prefixed properties used by different rendering engines of browsers(gecko,blink,webkit,trident etc)
-webkit for Chrome(blink,webkit), Safari(webkit) and Opera(blink);
-moz for Firefox(gecko),
-o for Opera(presto),
-ms for Internet Explorer(Trident).
Usually they're used to implement CSS features that are proprietary or the browser companies are still fighting over on the way it is supposed to be implemented, until finalisation by W3.
Using prefixes allows properties to be set to each rendering engine so you can tweak your css to adjust for the different implementations.
In theory after the inconsistencies are resolved the prefix will be removed. However there are always older versions of the browser you need to write and support CSS code for, so in practice it will take a lot of time before you can drop the prefix.
Also note that it's convention to declare the prefixed version first and then the standard version, so if and when the specifications are updated, the standard version will override the prefix versions
trying to flash three elements in a row with css3 animations. i've got it running, but there is a fade for each frame and i'd like to remove it. ideally each element stays visible for 1s, then hides immediately.
i've tried setting the animation with frames at 0% and 99% for opacity:1 and 100% for opacity: 0 but still no luck.
i hope theres a way to remove the fade!
webkit js fiddle
CSS:
.motion.play .frame {
-webkit-animation-name: flash;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
.frame:nth-of-type(2) {
-webkit-animation-delay: 1s;
}
.frame:nth-of-type(3) {
-webkit-animation-delay: 2s;
}
#-webkit-keyframes flash {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Just define your animation so that it keeps one state as long as possible and then switches to the other one as fast as possible. Like this:
#-webkit-keyframes flash {
0% { opacity: 1; }
49% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; }
}
Use proper animation-timing-function:
http://jsfiddle.net/rfGDD/1/ (WebKit only)
.motion.play .frame {
-webkit-animation-name: flash;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal; /* not "linear" */
-webkit-animation-fill-mode:forwards;
-webkit-animation-timing-function:steps(3, end);
}
MDN document on fill-mode
MDN document on direction
MDN document on steps() timing function
Edit:
Oops, just realized the logical flaw.
Revised: http://jsfiddle.net/rfGDD/3/ (WebKit only)
In addition to the above change, change the flash animation to following:
#-webkit-keyframes flash {
0% {
opacity: 1;
}
33% {
opacity: 0;
}
100% {
opacity: 0;
}
}
The problem is, the animation plays 3 seconds, but each element need to stay in the opacity:0 state after second #1, so I need to split the animation into 2 stages (with the timing length ratio 1:2), so elements can look like they stays in final stage for 2 seconds.
You may keep the opacity for the longest period and change it very quickly.
Try this:
.blinkMe {
animation: blink 1s linear infinite;
}
#keyframes blink {
0%,50% {
opacity: 0;
}
51%,100% {
opacity: 1;
}
}