I'm using a css animation in my page which makes the element rotate on itself on Y axis:
#keyframes rotateony {
100% {
transform: perspective(120px) rotateY(0deg);
-webkit-transform: perspective(120px) rotateY(-360deg) ;
}
}
#testdiv {
animation: rotateony 2.4s infinite linear;
}
But my page is a little bit laggy on mobile and that's the only element animating and no background java is running. I'm trying to improve the whole page performance, I read that you need to target 60fps synchronicity, so I thought that by using
animation: rotateony 2.4s infinite steps(144); /*144 = 2.4*60 => 60fps) */
or
animation: rotateony 2.4s infinite steps(72); /*72 = 2.4*30 => 30fps */
I can force the browser to makes frames synchronous to the device refresh rate.
Is this something that can really improve the performance? Visually, I can't tell the difference between all 3 of them. How can I improve this animations performance? I tried to test it using chrome inspet devices with my smartphone, but chrome debugger makes the page laggy by itself and does not give a good estimate of the real frame rate.
Related
I have a link. When I am clicking on it an css-animation in a div-block should appear.
But as soon as Safari has detected that I want to go to that link he is stopping the animation and calling the site.
I also added a setTimeout() with a delay of two seconds to prove my assumption.
Animation runs for two seconds, then call the link and stops the animation.
I found nothing on the internet so for for this kind of problem. All other browsers working so far by pleasing my wish.
I know a gif would be an option, but I wanted to really make sure that my approach is not working at all. So I am asking you to be sure it's not my lack of knowledge here :-)
Any ideas how to achieve this?
In Safari when you use Keyframes you need to use the whole percentage:
this will:
#-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }
}
Don't know why but that's the way Safari works! :)
The Problem
I have a web page I'm working on that uses simple fade in and fade out transitions on the page elements when it loads.
They work fine except I seem to run into a problem on Chrome for iOS. Oddly enough, the problem doesn't reproduce on any other browsers, nor does it occur when testing with say BrowserStack. But seems to only occur when using an actual iPhone or iPad in only Chrome.
What occurs is the text fades in and then the opacity goes back to 0 making it disappear again.
Because it only occurs on the actual devices I'm having a tough time tracking down the source of the issue. Obviously I was able to identify the transitions as the source of the problem but so far I have yet to figure out why it's occurring and only on a single browser on the actual devices. I'm unsure of a way to use dev tools straight on a mobile device, usually I would just emulate it in a VM but as I mentioned the problem doesn't occur there. I also don't have a mac so any solution requiring a direct developer interface isn't possible.
Anyone have any ideas as to why I'm experiencing such behavior or any suggestions as to how I could approach this?
Code
Here's the code for how the transitions are handled, they are quite simple:
NOTE: browser prefixes excluded for brevity.
jQuery('.fade-up').one('inview', function() {
jQuery(this).removeClass('no-display');
jQuery(this).addClass('animated fadeInUp appear');
});
And the transitions themselves:
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated.fadeInUp {
animation-name: fadeInUp;
}
I can't figure out what's going on here.
I was updating a site that still had a marquee tag in use, so I replaced with a much smoother (though, still a marquee) css animation:
Problem is that it works fine in chrome and firefox, but is inconsistent in safari. Sometimes it loads, sometimes it doesn't. Also seems to not load more often when coming to the homepage via a link on the site vs a hard reload.
Is there anything loading that could interfere with the animation? Any ideas why it wouldn't work on some loads?
The page it's happening on is http://www.peacenow.com and the CSS I'm using is:
.marquee span {
position: absolute;
left: 0;
top: 0;
width: 7500px;
-webkit-animation: moveSlideshow 165s linear infinite;
}
#-webkit-keyframes moveSlideshow {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-100%, 0);
}
}
Try looking at Safari's methods for animation. Alternately I'd try using a more cross browser compatible method like jQuery.
jQuery is your best option if you take into consideration todays browser user-base, and compatibility between them. Look into jQuery .animate() for more information.
<script>
$('.marquee').marquee(); // The code to start a simple marquee in JavaScript's jQuery Marquee Plugin
</script>
and you'll need the jQuery and Marquee Plugins loaded by downloading them from jQuery and jQuery Marquee and then link them with <script src="/path/to/script.js"></script>
JSFiddle Example
P.S. This does work on my Androids 2.3 browser from 4 years ago where as the basic animation doesn't from your website. And let's face it, not many web surfers are actually sitting at a computer anymore.
I think there are two ways you can address this issue for Safari.
The first is using JavaScript to kickstart your animation.
Using Charles proxy, I manipulated the response so that this:
<p class="marquee" id="countries">
became this:
<p class="marquee-pre" id="countries">
Then, I injected the following JS at the bottom of the page:
<script>
$('.marquee-pre').attr('class', 'marquee');
</script>
which immediately addressed the issue.
If you don't mind adding JS to your page, I would recommend this approach.
If you can't add JS, or prefer not to, I found making the following change to the CSS animation also worked:
.marquee span {
-webkit-animation: moveSlideshow 165s linear infinite;
}
to:
.marquee span {
-webkit-animation: moveSlideshow 165s steps(10000) infinite;
}
While this works, I found it wasn't as "smooth" as using linear timing...
I'm working on a web page that uses a lot of CSS animations (mostly TranslateY) that are triggered at various scroll positions through JQuery. It works great across Webkit, FF, IE, etc. Unfortunately, on iPhone and iPad, some (but not all) of the elements just don't appear. I'm aware of the differences of 'scrolling' on mobile versus desktop and have confirmed that the class being added to fire the animations is actually getting added.
I plugged the iPad into my desktop and have been using Safari's Mobile Web Inspector to poke around... what's really weird is that I have confirmed that the animations are firing and the divs are moving around, they just aren't visible... UNTIL I add a line of style to the div in the inspector. As soon as I start typing anything, literally even just a blank line, the element appears! This has me totally stumped. I've tried adding a z-index but don't know what else to do.
I'm using Safari 6.1.1, the latest version as of this writing. Also, turning off overflow:hidden; on the parent container has helped, but unfortunately, I need overflow:hidden; for this application.
Any help is appreciated, thanks -
This is how I add the class for the animation:
function getTopHeight() {
return (document.body.scrollTop) ?
document.body.scrollTop :
document.documentElement.scrollTop;
}
$(window).scroll(function() {
// Manage animations on scroll on the 'our story' page.
if (getTopHeight() >= 442){
$('.tree-1').addClass('popup-animation');
} ...
And these are some CSS rules I have surrounding that animation:
.tree-1{
transition: all 0.5s;
-webkit-transition: all 0.5s; /* Safari */
-moz-transition: all 0.5s; /* FF */
}
.popup-animation{
-ms-transform: translateY(-330px);
-webkit-transform: translateY(-330px);
-moz-transform: translateY(-330px);
}
Following some of the solutions on this somewhat related SO question, I was able to solve my problem by adding:
-webkit-transform-style: preserve-3d;
... to the elements being translated.
I'm trying to get an compass sass animation running with endless rotation. Thats working but at the end of each rotation the item seems to slow down a little bit (like easing) but there's no easing set by myself and in documentation any value is set to false. What could be the reason for tht problem?
This is my animation made with compass animate:
#include keyframes(rotation) {
0% {
#include transform(rotate(0deg));
}
100% {
#include transform(rotate(359deg));
}
}
The animation-timing-function CSS property is set to ease by default. To override this and make your animation smooth you'll need to set this property to linear where you're calling the animation:
animation-timing-function: linear;