So I'm trying to infinitely rotate a png on my webapp for iOS but having a hard time getting it to work in the simulator. Here my CSS:
#spinner { -webkit-animation: spinner 1s infinite linear; }
#-webkit-keyframes spinner {
0% { -webkit-transform: rotate3d(0,0,1,0deg); }
100% { -webkit-transform: rotate3d(0,0,1,360deg); }
}
it works perfectly on latest Chrome.. however, mobile safari doesn't seem to like 0-360. I tried 0 to 180 and that works for some strange reason... how can i go all 360 degrees?
Thanks!
as YuriAlbuquerque said, you can do it like this
#-webkit-keyframes spinner {
0% { -webkit-transform: rotate3d(0,0,1,0deg); }
25% { -webkit-transform: rotate3d(0,0,1,90deg); }
50% { -webkit-transform: rotate3d(0,0,1,180deg); }
75% { -webkit-transform: rotate3d(0,0,1,270deg); }
100% { -webkit-transform: rotate3d(0,0,1,360deg); }
}
Removing 25% and 75% in keyframes also works but only in less than ios6. In ios6, if you don't add 25% and 75%, than it will rotate clockwise 180deg and than anticlockwise from 180deg to 360deg.
Related
I have the following animation that is triggered every time a page is loaded. Basically, huge dots cover all the screen, and they will became smaller until disappearing. Its working perfectly fine in all devices but, on Iphone, using Chrome or Safari, when I click to the browsers back arrow, the previous page is loaded and the animation is not trigged. What might be the problem?
.dott{
animation: load-dotts-fadeout .4s ease-out;
-webkit-animation: load-dotts-fadeout .4s ease-out;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-delay: .3s;
-webkit-animation-delay: .3s;
}
#keyframes load-dotts-fadeout {
0% {transform:scale(3.3);}
100% {transform:scale(0);}
}
#-webkit-keyframes load-dotts-fadeout {
0% {-webkit-transform:scale(3.3);}
100% {-webkit-transform:scale(0);}
}
I have a CSS animation bug on Safari where the wave animation I created does not behave as expected.
below is my animation keyframe:
#keyframes wave {
20% {
transform: translateY(-18px);
}
0%,
40%,
100% {
transform: initial;
}
}
I created a pen for it - https://codepen.io/ikhazen/pen/BXdqrN
it behaves as expected in other browsers but not on Safari iPhone 6s.
To explain what was happening on my iPhone.
The first three dots animate at once, followed by the 4th and 5th dots. it seems like the animation-delay property isn't working very well.
and sometimes, I noticed that all dots animate at once. which is weird.
Thanks
I can see a similar problem on Safari on Mac OS, except the first dot goes on it's own, followed by the rest together. I have created a working pen here.
The problem is with the following css in your pen
#-webkit-keyframes wave {
20% {
transform: translateY(-18px);
}
0%,
40%,
100% {
transform: initial;
}
}
Changing it so that the percentages are in order fixes it:
#-webkit-keyframes wave {
0% {
transform initial;
}
20% {
transform: translateY(-18px);
}
40% {
transform: initial;
}
100% {
transform: initial;
}
}
If I am interpreting the specification correctly when it says
To determine the set of keyframes, all of the values in the selectors are sorted in increasing order by time
then this would seem to a bug in Safari, as the order in which you specifiy the keyframes should not matter.
If anyone stumble upon this, try using a negative value in your animation-delay property.
here's the link https://codepen.io/ikhazen/pen/BXdqrN
&-6 {
background: #c73e2c;
animation-delay: -150ms;
-webkit-animation-delay: -150ms;
}
&-5 {
background: #ac3c3f;
animation-delay: -300ms;
-webkit-animation-delay: -300ms;
}
&-4 {
background: #903a51;
animation-delay: -450ms;
-webkit-animation-delay: -450ms;
}
&-3 {
background: #733866;
animation-delay: -600ms;
-webkit-animation-delay: -600ms;
}
&-2 {
background: #573678;
animation-delay: -750ms;
-webkit-animation-delay: -750ms;
}
&-1 {
background: #3c348a;
animation-delay: -900ms;
-webkit-animation-delay: -900ms;
}
This part:
&-1 {
background: #3c348a;
animation-delay: 150ms;
}
is missing -webkit-animation-delay: 150ms;
Working code:
&-1 {
background: #3c348a;
animation-delay: 150ms;
-webkit-animation-delay: 150ms;
}
Advice: use css autoprefixer to avoid such errors.
I'm trying to implement CSS animation by using svg.
I am expecting that 2 svg boxes is rotating (spinning) with transform-origin: center center; 360 degrees. Looks like it behave what I expected with Chrome and Firefox but not with macOS 10.12 (High Sierra) and iOS 11.0.x and 11.1 beta Safari.
Seems like transform-origin: center center; does not work in Safari?
Is there any way to fix this issue?
What I expect:
What I see on Safari:
Here is a sample code
HTML:
svg(width=500, height=500, viewBox='0 0 500 500')
rect(x=100, y=100, width=50, height=100)
rect(x=400, y=100, width=50, height=100)
CSS:
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
rect {
transform-origin: center center;
animation-duration: 3s;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
&:nth-child(1) {
fill: red;
}
&:nth-child(2) {
fill: blue;
}
}
You can see the behavior here by accessing with Chrome and Safari:
https://codepen.io/manaten/pen/aLeXjW
EDIT:
https://codepen.io/manaten/pen/aVzeEK
Another example of the issue. Looks like origin is set to be the center of svg element by Safari.
try transform-box:fill-box;
this defines the layout box, to which the transform and transform-origin properties relate to
transform-box: fill-box; seems to solve the issue.
rect {
transform-origin: center center;
transform-box: fill-box;
animation-duration: 3s;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
&:nth-child(1) {
fill: red;
}
&:nth-child(2) {
fill: blue;
}
}
Your first sample with transform-box:
https://codepen.io/MichaelSchober/pen/QOPbKx
Works on MacOs HighSierra 10.13.1 with Safari 11.0.1
The property is still experimental tough. So make sure to check if you are okay with the browser compabtility:
https://developer.mozilla.org/de/docs/Web/CSS/transform-box
I'm trying to animate two images from a fixed position to side-do-side, using transition and transform/translation code.
It works right on Firefox / Chrome but on WebKit devices like iPhone and Safari it acts oddly. Basically the animation ends on the right place, but the transition don't.
.anim div{
transition: ease all 1s;
}
.anim div.transformed.a{
transform: translate(150%, -11%);
}
.anim div.transformed.b {
transform: translate(50%, -110%);
}
Here's a demo:
https://jsfiddle.net/0o8L1jg2/1/
On Safari the image goes all the away across and then suddenly sticks to the final position (which happens to be right). Any way to make the transition acts correctly on here?
Add the webkit prefix for webkit devices.
.anim div{
transition: ease all 1s;
-webkit-transition: ease all 1s;
}
.anim div.transformed.a{
transform: translate(150%, -11%);
-webkit-transform: translate(150%, -11%);
}
.anim div.transformed.b {
transform: translate(50%, -110%);
-webkit-transform: translate(50%, -110%);
}
I'm currently in the process of building a new mobile responsive site for my company that uses a number of CSS3 transitions on scroll to make images pop into focus. The effect is very striking and works great on modern browsers as well as my Google Nexus devices.
The problem I have is that the animations themselves are really slow on Apple Devices. I've tried them on a 1st Generation Ipad and an IPhone 5. On the Nexus you can scroll to the area of the page the animations are on and they will pop in straight away. On Apple devices however you have to wait for several seconds for the animations to trigger.
I have used the following library to achieve these animations:
http://www.justinaguilar.com/animations/scrolling.html
If you browse to this url on an Apple device, you will see what I mean with regards to the animations taking a while to load. After some research online I found that many suggest it could be due to the graphics processor not kicking in on these devices meaning everything is rendered (slowly) using the processor. To get around this it is suggested that the following is added to the animations to ensure the graphics processor kicks in:
-webkit-transform: translateZ(0);
However, I have already tried this to no avail. After some further research I have found that many suggest to replace translateX or translateY with translate3D but I have not tried this method yet as I do not understand how I would convert the following example:
/*
==============================================
fadeIn
==============================================
*/
.fadeIn{
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
-webkit-transform: translateZ(0);
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
60% {
transform: scale(1.1);
}
80% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
60% {
-webkit-transform: scale(1.1);
}
80% {
-webkit-transform: scale(0.9);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
My question therefore is twofold:
How would I convert the code above so that it uses the supposedly faster transform3d or scale3d syntax?
Are there any other methods I could use to improve the performance on these (Apple) devices so that they match the performance on more standards compliant devices such as the Nexus range?
Any help would be greatly appreciated.