Blokowanie animacji w CSS (RAF)

Witam, czy istnieje możliwość, aby wykonywana animacja przy pomocy transform nie została zatrzymana po przełączeniu karty na inną ?

nie, RAF zgodnie ze swoją nazwą będzie czekać, aż będzie jakaś klatka rysowana w ogóle.

Ale zapewne źle podchodzisz do kwestii animacji, zapewne robisz coś w rodzaju:

// uproszczony prawie pseudokod
var x = 0;
var anim = function() {
  if (x<1000) {
    x++;
    obiekt.x = x;
    RAF(anim);
  }
}
RAF(anim);

Tym samym blokujesz animację, gdy karta jest przełączona, w dodatku zakładasz, że każda przeglądarka wyciągnie 60fps (im mniej fps tym dłużej animacja potrwa).

Zrób to tak:

// uproszczony prawie pseudokod
var startx = 500;
var endx = 1000;
var animtime = 16600; // wyjdzie tyle samo co wyżej przy 60 fps
var starttime = now();
var anim = function() {
  var time = now();
  var elapsed = time - starttime;
  if (elapsed > animtime) {
    elapsed = animtime;
  }
  var progress = elapsed/animtime; // od 0 do 1
  obiekt.x = (endx-startx) * progress + startx;
  if (progress !== 1) {
    RAF(anim);
  }
};
RAF(anim);

Z każdą klatą obliczasz ile czasu upłynęło od rozpoczęcia animacji i w którym miejscu obiekt powinien się znaleźć. Tym sposobem, jeżeli przeglądarka nie rysuje - nic się nie dzieje, a gdy user powróci na naszą stronę - animacja będzie w tym miejscu, w którym byłaby, gdyby cały czas była rysowana.

Sposób pierwszy jest prostszy, ale:

1. uniemożliwia easing
2. wymuszenie :rysowania" (a konkretnie obliczeń), w teorii możliwe przez setTimeout(fn, 1000/16.666) tylko obciąża przeglądarkę

Drugi sposób natomiast jest lekki i umożliwia stosowanie easingu.

Drugi sposób wygląda bardzo fajnie, ale jeżeli steruje prędkością animacji przy pomocy cubic-bezier jak zastosować Twoje rozwiązanie mniej więcej ?

Pozwolę sobie odświeżyć temat.

Posiadam taki kod:

var pozycjazmiany= 1000;
$('.animacja').animate({
                        marginLeft: -pozycjazmiany+"px"
                    }, {
                        duration: 13000,
                        easing: 'easeOutCubic',
                        step: function(now, fx) {
                            
                        },
                        complete: function() {
});

Jak ułożyć teraz ten kod, aby osoba, która zmieniła kartę i wróci na nią posiadała ją w odpowiednim miejscu?
Lub żeby w ogóle animacji była zakończona jeżeli jest po czasie?

Z góry dziękuje za odpowiedź.