Not so surprisingly scale effects look horrible in ms edge browsers. Is there a way to disable this all together for edge?
.jumbotron__bg {
-webkit-animation-name: animateBg;
animation-name: animateBg;
-ms-animation-name: none;
animation-duration: 18000ms;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(.3,0,.7,1);
animation-iteration-count: 1;
}
#keyframes animateBg {
from {
transform: scale(1.05, 1.05);
-ms-transform: scale(1,1);
}
to {
transform: scale(1, 1);
-ms-transform: scale(1,1);
}
}
(ie is ok, does not work for edge)
you could use #supports with a property that only Edge supports ;
this works on Edge 12 and later (all versions) :
#supports (-ms-ime-align: auto) {
.jumbotron__bg {
animation-name: none;
}
}
~or~
this only works in Edge up to v13
#supports (-ms-accelerator:true) {
.jumbotron__bg {
animation-name: none;
}
}
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:
I am trying to capture a specific moment in elements animation. Meaning - I want the animation to start and stop at point X (lets say start and stop on second 5 of 100s animation).
Here is my shot at it
JSFiddle
#-webkit-keyframes background {
from { background: yellow; }
100% {
background: blue;
}
}
div {
-webkit-animation-name: background;
-webkit-animation-duration: 100s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: -40s;
-webkit-animation-play-state: paused;
}
This seems to work great in Chrome and Firefox but doesnt seem to work in Safari and IE(no way, right?!)
Note: I left the prefix in on purpose to test it on Safari specifically.
Unlike in Chrome, it seems like the animation never starts in Safari and remains on the initial step.
Is this a known issue? Is there a workaround or another way to implement this?
UPDATE/CLARIFICATION
What i need is to be able to capture a specific FRAME of the animation. Open my fiddle in Chrome and play around animation-delay attribute in my fiddle (make sure it remains negative). What you will see is that you are able to catch 1 specific frame of the animation. Thats exactly what I need. My problem is that this doesnt work in Safari.
What about creating a keyframe animation of 5 seconds and make sure there is ' 100ms in percentage' where the frames are the same.
Since the animation scale for time is in percentages, we can calculate that 100ms/5000ms is equal to 2%/100%.
div {
background:#333;
padding:10px;
width:100px;
height:100px;
color:#fff;
animation-name: animateAndPause;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#keyframes animateAndPause {
0% {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
98% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
100% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
for the purpose of demonstration, the jsfiddle has a longer pause, 500ms.
https://jsfiddle.net/bfu9wvxt/5/
If you want your animation to stop and start at a specific point, you need more keyframes:
#-webkit-keyframes background {
0% { background: yellow; }
/* When You Want */% { background: /* A different color in-between yellow and blue! */; }
/* When You Want */% { background: /* A different color in-between yellow and blue! */; }
100% { background: blue; }
}
div {
-webkit-animation-name: background;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: ease;
}
Replace the first /* When You Want */% with a percentage of the animation duration where you want it to stop.
Replace the second /* When You Want */% with a percentage of the animation duration where you want it to start again.
Replace both occurrences of /* A different color in-between yellow and blue! */ with the same color, a color between yellow and blue.
This should work in Safari: Fiddle
#-webkit-keyframes change {
0% { background-color: yellow; }
100% { background-color: blue; }
}
div {
-webkit-animation-name: change;
-webkit-animation-delay: 0s;
-webkit-animation-duration: 5s;
-webkit-animation-play-state: running;
-webkit-animation-timing-function: cubic-bezier(0.29, 0.3, 0.86, 0.99);
}
Playing with the cubic-bezier curve can replicate the animation of stopping then starting at 5s out of 100s but it'll be pretty hard to start and stop the animation without javascript.
Try this code:
Is compatible with all the browsers especially safari.
div {
width: 100%;
background-color: #fff;
position: relative;
-webkit-animation-name: example;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 5s;
/* Chrome, Safari, Opera */
-webkit-animation-delay: 5s;
/* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 5s;
animation-delay: 5s;
-webkit-animation-iteration-count: 100;
/* Chrome, Safari, Opera */
animation-iteration-count: 100;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes example {
25% {
background-color: blue;
}
50% {
background-color:yellow ;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
}
/* Standard syntax */
#keyframes example {
25% {
background-color: blue;
}
50% {
background-color:yellow ;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
}
<div>Color bar</div>
If you want it not 100 times, You can take it out and add 100s to
duration, because I'm not sure what you want
let me know if you have any question.
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 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'm entering the world of CSS3 animations and transitions so please forgive my ignorance.
Here's the simplified version of what I'm trying to do:
I have a ball that "pulsates" infinitely via CSS3 keyframes
I want the ball to grow bigger and stay like that when I hover over it
I want the ball to become small again when I move the mouse away from it and keep pulsating (all the transitions need to be smooth, of course).
Here's my stab at it using a mix of CSS3 animations and transitions (testing this on Chrome so far, hence webkit prefixes):
#-webkit-keyframes pulsate {
from {
-webkit-transform: scale(0.7);
}
to {
-webkit-transform: scale(0.8);
}
}
.ball {
background: blue;
width: 100px;
height: 100px;
border-radius: 50%;
transition: all 1s;
-webkit-transform: scale(0.7);
-webkit-transform-origin: center center;
-webkit-animation-duration: 800ms;
-webkit-animation-name: pulsate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
.ball:hover {
-webkit-transform: scale(2);
-webkit-animation-play-state: paused; /* transition works but gets reset at the end*/
/*-webkit-animation: 0;*/ /* transition works only one time, and no smooth transition on mouse out */
}
jsFiddle Demo
The result is pretty close but as soon as the ball finishes expanding on hover, it suddenly becomes small again (don't understand why). I also tried disabling the animation via -webkit-animation: 0; instead of pausing it but it doesn't work well either.
I tried a different approach that uses keyframes only (no transitions) by attempting to call a different keyframe set on hover:
#-webkit-keyframes pulsate {
from {
-webkit-transform: scale(0.7);
}
to {
-webkit-transform: scale(0.8);
}
}
#-webkit-keyframes expand {
to {
-webkit-transform: scale(2);
}
}
#-webkit-keyframes shrink {
to {
-webkit-transform: scale(0.7);
}
}
.ball {
background: blue;
width: 100px;
height: 100px;
border-radius: 50%;
transition: all 2s;
-webkit-transform: scale(0.7);
-webkit-transform-origin: center center;
-webkit-animation-duration: 800ms, 800ms;
-webkit-animation-name: shrink, pulsate;
-webkit-animation-iteration-count: 1, infinite;
-webkit-animation-direction: normal, alternate;
-webkit-animation-timing-function: ease-in-out, ease-in-out;
}
.ball:hover {
-webkit-animation-name: expand;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: forwards;
}
jsFiddle Demo
The ball stays big as long as the mouse is over it but there's still no smooth transition when the mouse moves away from the ball. I expect it to play the shrink animation instead but it doesn't.
Am I missing something or this is impossible to implement with just pure CSS at the moment?
// Related thread but didn't work for me: Stop animation and start transition on hover
You need to add an animation delay to allow the transition to complete because it reverts back to scale(.7) at the start of the animation. Updated jsFiddle
-webkit-animation-delay:1s;
EDIT
I realized that the answer I posted here was not fully correct. True, the delay animated the transition from big back to small, but if you hover over the pulsing ball when its expanded it jumps back to it's 0 value of .7 before animating to the large scale.
Updated Demo
I came up with a fix that just uses some javascript to fix it based on this article. You do have to change the CSS a little, but it's not very noticeable in the outcome. Here is the updated code
/* CSS */
body {margin: 100px;}
#-webkit-keyframes pulsate {
0% {
-webkit-transform: scale(0.7);
}
50% {
-webkit-transform: scale(0.8);
}
100% {
-webkit-transform: scale(0.7);
}
}
.ball {
background: blue;
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-transform: scale(0.7);
-webkit-transform-origin: center center;
transition: all 1s;
}
.ball.animated {
-webkit-animation-duration: 1600ms;
-webkit-animation-name: pulsate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
/* Javascript */
var ball = document.getElementsByClassName('ball')[0],
pfx = ["webkit", "moz", "MS", "o", ""],
hovered = false;
function AnimationListener() {
if(hovered)
{
ball.classList.remove('animated');
ball.style.webkitTransform = 'scale(2)';
ball.style.transform = 'scale(2)';
}
}
function TransitionListener() {
if(!hovered)
{
ball.classList.add('animated');
}
}
function PrefixedEvent(element, type, callback) {
for (var p = 0; p < pfx.length; p++) {
if (!pfx[p]) type = type.toLowerCase();
element.addEventListener(pfx[p]+type, callback, false);
}
}
PrefixedEvent(ball, "AnimationIteration", AnimationListener);
ball.onmouseover = function() {
hovered = true;
}
ball.onmouseout = function() {
hovered = false;
PrefixedEvent(ball, "TransitionEnd", TransitionListener);
ball.style.webkitTransform = 'scale(.7)';
ball.style.transform = 'scale(.7)';
}
Just update this CSS rule, I have added From & To - in Expand & Shrink:
#-webkit-keyframes expand {
from {
-webkit-transform: scale(1);
}
to {
-webkit-transform: scale(2);
}
}
#-webkit-keyframes shrink {
from {
-webkit-transform: scale(2);
}
to {
-webkit-transform: scale(1);
}
}