I seem to have an issue with the webkit animations. I added an overlay spinner. This one shows fine on every browser (Mozilla, IE, Edge, Chrome). On Andriod and iPhone/iPad the animation is not fired. Am I missing something in my code?
In CSS I added following to the div of the element:
-webkit-animation-name:webkit-rotate-scale;
-webkit-animation-duration:0.75s;
-webkit-animation-direction:normal;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-play-state:running;
and
#-webkit-keyframes webkit-rotate-scale {
0% {-webkit-transform: rotate(0deg) scale(1);}
50% {-webkit-transform: rotate(180deg) scale(.5);}
100% {-webkit-transform: rotate(360deg) scale(1);}
}
Off course I added the standard (no webkit) alternatives also.
Can someone tell me what I'm missing?
The div where I am showing it in has display: inline-block.
Thanks in advance!
Kind regards,
Jerry
Related
I made a little CSS animation with a simple svg to transition my hamburger menu to a cross. It works as expected on Chrome and Firefox, but the translation is off in Safari. The animation plays, and even resets correctly so it has nothing to do with prefixes (I tried). The translate of the two lines making the cross is just wrong.
I'm guessing it has something to do with how safari handles the transform when scaling is also applied. Does anyone know if there is a work around / or what I'm doing wrong?
JSFiddle
Safari / Firefox / Chrome
#keyframes showCross {
0% {
transform: scale(1) rotate(0);
}
40% {
transform: scale(0.3) rotate(280deg);
}
100% {
transform: scale(1) rotate(360deg);
}
}
#keyframes showCross_P1 {
0% {
transform: rotate(0);
}
100% {
transform: rotate(-45deg) translate(-42%, -10%);
}
}
I fixed it by doing the following:
First I removed the groups surrounding the paths.
Then I gave all the paths the following values:
transform-origin:center center;
transform-box: fill-box;
Next I edited the animation keyframes to look as follows:
0% {
transform: translate(0rem,0rem) rotate(0);
}
100% {
transform: translate(-10rem,-38rem) rotate(-45deg) ;
}
Safari has problems with percents and also if you put the rotation before the translate it has inconsistency with other browsers, use rem instead!
I'm diddling with some css animations and I came to a small dilemma when it came to adding the vendor prefixes. I know that the "keyframes" property requires explicit defining with vendor prefixes just as much as some other CSS properties like "transform". However, what I've been wondering is whether I should include the vendor prefixes on both parts or the "keyframes" would be sufficient.
Here is an example of what I mean:
ex1:
#-webkit-keyframes animation_name {
0% {transform: rotateZ(0deg);}
100% {transform: rotateZ(180deg);}
}
ex2:
#-webkit-keyframes animation_name {
0% {-webkit-transform: rotateZ(0deg);}
100% {-webkit-transform: rotateZ(180deg);}
}
Which would be more correct?
Thanks in advance.
Example 2, as this is the style of output I would expect from an autoprefixer tool, for example: enter link description here
I'm applying CSS animations to SVG elements, works well with Firefox and Chrome, but won't render o Edge.. I tried to prefix it but still won't work..
I'm using simple Keyframes animation with this code:
#keyframes rotate {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
here is the demo:
http://jsbin.com/regumiruha/edit?html,css,output
Does anyone know how to fix this?
I am attempting to make a type of CSS only slide transition from one content section to another. In order to do so in an interesting way, I use CSS's perspective and rotateX to in essence lay down the page content. I then am trying to slide the content out towards the bottom of the screen using translateY
Separately, both the translateY and the rotateX work perfectly, no matter what the perspective is. However, when combined, it only works with certain perspectives based on the window size and rotateY value
In this jsFiddle it works as I would like it to in the window sizes I have tried. The problem is that I would like the perspective value to be lower, around 250px, but I cannot do so without breaking the animation.
I tried using a higher rotateY degree instead of making the perspective lower but the same issue occurs
#keyframes slide {
0% { transform: perspective(450px); }
25% { transform: perspective(450px) rotateX(30deg); }
50%,100% { transform: perspective(450px) rotateX(30deg) translateY(100%); }
}
I have tested this on CSS Deck and jsFiddle both in FireFox and Chrome and it seems to be a consistent issue
Can anyone provide me with a reason why this is happening and offer a work around?
Try setting the perspective as a separate rule on a parent element (as opposed to being part of the transform in the animation).
.parent {
perspective: 250px;
}
#keyframes slide {
25% { transform: rotateX(30deg); }
50%, 100% { transform: rotateX(30deg) translateY(100%); }
}
Updated fiddle: http://jsfiddle.net/myajouri/DYpnU/
My reasoning:
The perspective does not change during the animation so there's no point in having it as part of the animation.
Since your elements occupy 100% of the parent's area, setting the perspective on the parent should produce the same result as setting it on the elements themselves (inside transform).
It seems to solve your problem (see fiddle above).
UPDATE: after more experimentation, I found that explicitly setting the translateY(0) initial value in the animation would solve the issue as well.
#keyframes slide {
0% { transform: perspective(150px); }
25% { transform: perspective(150px) rotateX(30deg) translateY(0); }
50%, 100% { transform: perspective(150px) rotateX(30deg) translateY(100%); }
}
Updated fiddle: http://jsfiddle.net/myajouri/YJS3v/
Only a slight improvement over myajouri answer.
At leats in Chrome, you can write
#-webkit-keyframes slide {
0% { -webkit-transform: perspective(50vh); }
10%,15% { -webkit-transform: perspective(50vh) rotateX(30deg) translateY(0%); }
50%,100% { -webkit-transform: perspective(50vh) rotateX(30deg) translateY(100%); }
}
Setting the perspective to the viewport height should make it more responsive that your current setting
demo
(Untested in other browsers)
I have a simple animation (only for Safari in this example):
h1 {
-webkit-animation: moveDown 1s ease-in-out;
}
#-webkit-keyframes moveDown {
0% {-webkit-transform: translateY(-20px); opacity: 0;}
100% {-webkit-transform: translateY(0px); opacity: 1;}
}
In the latest Safari (5.1.5) it works just fine.
But by accident I viewed the example in an older Safari (5.0.6) and saw nothing. The h1 was gone.
By kind of triggering eather by adding a none-rotate (opacity & animation works):
#-webkit-keyframes moveDown {
0% {-webkit-transform: translateY(-20px) rotate(0deg); opacity: 0;}
100% {-webkit-transform: translateY(0px) rotate(0deg); opacity: 1;}
}
or start at 1% (opacity doesn't work but animation):
#-webkit-keyframes moveUp{
1% {-webkit-transform: translateY(-20px); opacity: 0;}
100% {-webkit-transform: translateY(0px); opacity: 1;}
}
it worked again.
This now leads me to two serious questions:
Is there anything I did wrong in the first example?
Is there a known bug in older version of Safari which I should treat different?
Cause:
I don't mind if you can't see the animation in non-supporting browsers (it's just a nice add on) but it would be daring to not know when your animated element just doesn't show up anymore.
How could I be able to use animations in general as an add-on it without worrying?
If anybody askes for a fiddle: I tried recreating it. But here's another interesting thing: The exact same code will not have any effect in the old Safari in jsfiddle. Nor it animates or dissapears.
Edit:
I'm just seeing that the h1 is not dissapearing anymore with the original code (I can't reconstruct it) but doesn't do any animation eather. It just works with one of the described triggers.
JS-FIDDLE:
Here a working fiddle with the two examples.
I don't have an old version of Safari handy, but I recall playing with animations in older versions and encountered these types of bugs. I worked around them by putting the 'end state' in the selector, e.g. p {opacity: 1} http://jsfiddle.net/pkFaT/