I'm currently working on creating an intro movie for a game and I thought it would be interesting to use CSS animations. However, I've noticed that some parts of the animation appear bumpy and inconsistent. It seems that depending on the transition-timing-function used, certain parts of the animation run smoothly while others become jerky.
I'm perplexed as to why some portions move seamlessly while others suddenly stutter within the same transition.
Could it be that I'm making errors in my approach? Are there more effective methods to accomplish this?
Click here for code snippet
HTML
var screen1 = $('#screen1');
var screen2 = $('#screen2');
JavaScript
screen1.css({
'background': 'url(http://uniquenaturewallpapers.com/wp-content/uploads/2013/01/3d-underwater-Wallpaper.jpg)',
'background-position': 'left center',
'background-size': '100%',
'-webkit-filter': 'none'
});
screen2.css({
'opacity': '0'
});
setTimeout(function () {
screen2.css({
'opacity': '1'
});
}, 20000);
<div id="screen1"></div>
<div id="screen2"></div>
CSS:
#screen1, #screen2 {
background: black;
background-size: 150%;
background-position: 100% 50%;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
z-index: 10;
position: absolute;
width: 100%;
height: 100%;
transition: 30s ease-in, -webkit-filter 20s ease-in 8s;
}