CSS transition sur fond-image/taille très cahoteuse, comment puis-je le rendre plus lisse?

Question

Je fais une sorte de film d'intro pour un jeu et j'ai pensé que ce serait bien de le faire avec CSS. Certaines parties de l'animation sont vraiment cahoteuses mais je ne sais pas pourquoi. En fonction de l'utilisation différente transition-timing-function différentes parties de l'animation vont lisse ou bosselée. Je ne comprends pas pourquoi certaines parties bougent très doucement et commencent soudainement à bégayer (durant la même transition).

Est-ce que je fais quelque chose de mal? Y a-t-il de meilleurs moyens de le faire?

Fiddle

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; 
} 

Answer 1

C'est vraiment vieux, mais j'ai aussi eu du mal avec jusqu'à ce que je trouve un g manière ood à mettre en œuvre scale

départ du violon

http://jsfiddle.net/YEvCU/6/

J'utilise transform: scale(3) animer ensuite à transform: scale(1)

HTML

<div id="screen1"></div> 
<div id="screen2"></div> 

JavaScript

var screen1 = $('#screen1'); 
    var screen2 = $('#screen2'); 

    screen1.css({ 
     'background': 'url(http://uniquenaturewallpapers.com/wp-content/uploads/2013/01/3d-underwater-Wallpaper.jpg)', 
      'background-position': 'left center', 
      'background-size': '100%', 
      '-webkit-transform': 'scale(1)', 
      'transform': 'scale(1)', 
      '-webkit-filter': 'none' 
    }); 
    screen2.css({ 
     'opacity': '0' 
    }); 

    setTimeout(function() { 
     screen2.css({ 
      'opacity': '1' 
     }); 
    }, 20000); 

CSS:

#screen1, #screen2 { 
    background: black; 
    background-size: 100%; 
    background-position: 100% 50%; 
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); 
    -webkit-transform: scale(2); 
    transform: scale(2); 
    z-index: 10; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    transition: 30s ease-in, -webkit-filter 20s ease-in 8s; 
}