Throwing Karte wie Animation in css

Question

Es ist schwer zu erklären, aber die Animation i zu erreichen bin versucht ...

Ich habe eine Liste von div ‚s und ich möchte, dass sie auf den Bildschirm animieren. Als würdest du sie auf einen Tisch werfen.

Also mein html:

<ul class="content_anim_1__container_items"> 
    <li class="content_anim_1__image-item1"></li> 
    <li class="content_anim_1__image-item2"></li> 
    <li class="content_anim_1__image-item3"></li> 
    <li class="content_anim_1__image-item4"></li> 
    <li class="content_anim_1__image-item5"></li> 
    <li class="content_anim_1__image-item6"></li> 
    <li class="content_anim_1__image-item7"></li> 
    <li class="content_anim_1__image-item8"></li> 
    <li class="content_anim_1__image-item9"></li> 
    </ul> 

Alle li Tags sind position: absolute und right: -500px dann in meinem JS ich tun:

function activeAnim() { 
    for(var x=0; x < $(".content_anim_1__container_items li").length; x++) { 
    $(".content_anim_1__image-item1").addClass("activeAnim1"); 
    $(".content_anim_1__image-item2").addClass("activeAnim2"); 
    $(".content_anim_1__image-item3").addClass("activeAnim3"); 
    $(".content_anim_1__image-item4").addClass("activeAnim4"); 
    $(".content_anim_1__image-item5").addClass("activeAnim5"); 
    $(".content_anim_1__image-item6").addClass("activeAnim6"); 
    $(".content_anim_1__image-item7").addClass("activeAnim7"); 
    $(".content_anim_1__image-item8").addClass("activeAnim8"); 
    $(".content_anim_1__image-item9").addClass("activeAnim9"); 
    } 
} 


activeAnim(); 

Schleife über meine divs und fügen Sie die Klasse activeAnim, die etwas hat, wie right: 40px; top: 20px;

Mein Problem ist es fühlt sich einfach nicht flüssig genug.

ich auf Animationen las und fand im Grunde ein Artikel zu erklären, dass ich nicht mit left und right aber mit transform: translate3d() Link animieren sollte - https://www.kirupa.com/html5/animating_movement_smoothly_using_css.htm

Gibt es irgendwelche Ressourcen gibt oder Tutorials zu erreichen, was ich bin nach oder in der Nähe suchen.

Answer 1

Werfen Sie einen Blick auf:

• Material design - Duration & easing

• Material design - Movement

anstelle von oben/links/rechts/unten zur Verbesserung der Leistung umwandeln übersetzen. Spielen Sie mit der Beschleunigungsfunktion. In diesen Links haben Sie einige Erleichterungsfunktionen, die Sie nützlich finden könnten.