Rendre l'élément caché pendant l'animation-retard en CSS

Question

J'ai un élément qui glisse sur l'écran à partir de ce que je voudrais ressembler à la page, puis glisser et "atterrir" sur le côté opposé. J'ai l'animation vers le bas mais il semble que pendant le retard, l'image se trouve juste sur la page en attente. Le retard est parce que j'ai une autre animation qui doit finir avant que celle-ci commence.

ici est mon code CSS et je suis référençant par classe avec une réaction extrémité avant

.tester{ 
    position: relative; 
    animation-name: test_css_moving_sideways; 
    animation-duration: 3s; 
    animation-iteration-count: 1; 
    animation-direction: linear; 
    left: 90%; 
    animation-delay: 2s; 
} 


@keyframes test_css_moving_sideways { 
    0% { left: 0px; top: 0px;} 
    100% { left: 90%; top: 0px; } 
} 

Answer 1

1) Pour corriger cela, vous pouvez définir left propriété dans le css pour qu'il se trouve à 0% depuis alors quand votre animation commence, elle ne doit pas se déplacer à gauche de 0% (où votre animation commence) car elle sera déjà là :)

2) Ajoutez animation-fill-mode - cela contrôle ce qui se passe à la fin de l'animation. La définition de cette valeur à forwards appliquera la css de la fin de l'animation à l'objet

donc modifiant votre code CSS à:

.tester{ 
    position: relative; 
    animation-name: test_css_moving_sideways; 
    animation-duration: 3s; 
    animation-iteration-count: 1; 
    animation-direction: linear; 
    left: 0%; 
    animation-delay: 2s; 
    animation-fill-mode: none, forwards; 
} 

Answer 2

Vérifiez codepen: https://codepen.io/sasssssha/pen/Nayzpg

Vous devez créer une plus classe (.testerAnimated) et ajoutez ce nom de classe à l'élément avec une fonction js (si vous voulez une animation dans un certain temps) ou vous pouvez l'ajouter immédiatement (dans ce cas, l'animation commence quand la page sera chargée). Vérifiez-le:

.testerAnimated{ 
    animation-name: test_css_moving_sideways; 
    animation-duration: 4.5s;   //play with it 
    animation-delay: 2s; 
    }  

    .tester{ 
    position: relative; 
    animation-name: test_css_moving_sideways; 
    left: 90%; 
    visibility:hidden; 
} 


@keyframes test_css_moving_sideways { 
    0% { left: 0px; top: 0px;visibility:visible;} 
    100% { left: 90%; top: 0px;visibility:visible;} 
}