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);}
}
Related
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.
I'm getting familiar with IonicFramework and building really simple app.
For now it has one button revealing panel (fading in, was experimenting with sliding in from the bottom too). It works fine on Androids but on iOS animation has strange flickering at the beginning (on both emulator and device).
Basically my view looks as follows:
<ion-content class="has-header" ng-controller="MainCtrl">
<div class="container">
<button class="btn btn__big centered primary" ng-click="toggleDetails()">toggle info</button>
</div>
<div class="panel panel-animated primary ng-hide" ng-show="detailsVisible">
Details here
</div>
</ion-content>
And css classes with animations I apply to ng-show
.panel {
position: absolute;
width: 100%;
height: 40%;
top: 60%;
padding: 1em;
}
.panel-animated {
-webkit-animation: fadeIn 0.5s;
-moz-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.panel-animated.ng-hide {
-webkit-animation: fadeOut 0.5s;
-moz-animation: fadeOut 0.5s;
animation: fadeOut 0.5s;
}
I'm not using any external libs to animate, just plain Ionic built-in animation classes.
I created repository with complete, ready to run application so you may want to check it.
Also video showing flickering but as flash videos are crap there is only one recorded while there were many more of them actually video here
Ionic keyframe animations fadeIn and fadeOut use opacity
ng-hide makes an element invisible with display: none !important;. Adding/removing ng-hide class causes repaint to happen.
Ionic uses Angular ngAnimate. In your style.css you have:
.panel-animated {
-webkit-animation: fadeIn 0.5s;
-moz-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.panel-animated.ng-hide {
-webkit-animation: fadeOut 0.5s;
-moz-animation: fadeOut 0.5s;
animation: fadeOut 0.5s;
}
I tried running it on a pretty decent nvidia graphics and it caused a peak on the rendering graph in Chrome.
After changing the styles according to the docs on ngShow aniations
.panel-animated.ng-hide-remove {
-webkit-animation: fadeIn 0.5s;
-moz-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.panel-animated.ng-hide-add {
-webkit-animation: fadeOut 0.5s;
-moz-animation: fadeOut 0.5s;
animation: fadeOut 0.5s;
}
it causes no such peak:
It's because .ng-hide-add is applied after the element is rendered and only then animation is applied. Junk removed.
Check the https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode. Probably iOS set wrong opacity value on the first frame.
I have created a CSS3 keyframe animation to light up some candles as a little birthday greeting. The flame is created with pure CSS box-shadows and the :before pseudo element.
Animation:
-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation: candle 25s ease-in 1 normal forwards;
-moz-animation: candle 25s ease-in 1 normal forwards;
animation: candle 25s ease-in 1 normal forwards;
Keyframes:
#keyframes candle{
0%{transform: scale(0,0);}
3%{transform: scale(0.3,0.2);}
9%{transform: scale(1,1.1);}
9.5%{opacity: 1;}
10%{transform: rotate(3deg);}
15%{transform: rotate(2deg);}
20%{transform: rotate(-6deg);}
25%{transform: rotate(3deg);}
30%{transform: rotate(2deg);}
35%{transform: rotate(-6deg);}
40%{transform: rotate(5deg);}
45%{transform: rotate(2deg);}
50%{transform: rotate(-3deg);}
55%{transform: rotate(3deg);}
60%{transform: rotate(1deg);}
65%{transform: rotate(-4deg);}
70%{transform: rotate(3deg);}
75%{transform: rotate(2deg) scale(0.8,0.7);}
80%{transform: rotate(-2deg) scale(0.7,0.6); opacity: 1;}
85%{transform: rotate(5deg) scale(0.6,0.5);}
90%{transform: rotate(3deg) scale(0.5,0.4);}
95%{transform: rotate(-2deg) scale(0.4,0.3);}
100%{transform: scale(0.3,0.2);}
}
Each flame has an individual delay and an initial opacity set to 0. The opacity is then overwritten by the keyframe animation.
See here: http://nymphenburg.netz-giraffe.de/
Now, this works fine in FF, Chrome, Explorer > 9 and so on. My only problem is, that is does NOT work with Webkit-Browsers under OS and iOS systems (including iPad and iPhone). It seems that only on those systems the opacity is not overwritten.
Does anyone have any clue how to fix this?
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.