Comment est-ce que je peux faire ce cercle aller au fond de l'écran seulement css?

Question

J'ai donc ce code.

@keyframes anim{ 
    0% {background-color: red; top: 0px; } 
    100% {background-color: yellow; top: 800px;} 
} 

#circle { 
    height: 100px; 
    width: 100px; 
    border-radius: 50px; 
    background-color: red; 
    animation-name: anim; 
    animation-duration: 3s; 
    position: relative; 

} 

Le cercle est un élément div. Cette animation le fait descendre de 800px. Mais je veux faire descendre autant que la taille du navigateur et ensuite arrêter. Alors qu'aucun parchemin n'apparaît. Je dois le faire avec CSS SEULEMENT. Y a-t-il un moyen de le faire?

Answer 1

Vous pouvez viewport pourcentages:

@keyframes anim{ 
    0% {background-color: red; top: 0px; } 
    100% {background-color: yellow; top:100vh;} 
} 

#circle { 
    height: 100px; 
    width: 100px; 
    border-radius: 50px; 
    background-color: red; 
    animation-name: anim; 
    animation-duration: 3s; 
    position: relative; 

} 

mais depuis votre balle va aller en dehors du cadre lorsque vous le mettez à 100vh. Utilisez comme 80.

Answer 2

Vous pouvez animer en pourcentage plutôt qu'en pixels. Le problème est, vous ne pouvez pas dire 100% moins la hauteur de l'élément avec juste top ou bottom (éditer mon mauvais, s'avère que vous pouvez! Voir autre réponse).

Mais vous pouvez l'animer à top:100% qui le repousserait à la fin de la page, puis utiliser translateY (différent de top) pour le ramener. Voir ci-dessous:

html, body{ 
    height:100%; 
} 

@keyframes anim{ 
    0% {background-color: red; top: 0%; transform:translateY(0px); } 
    100% {background-color: yellow; top: 100%; transform:translateY(-100px);} 
} 

#circle { 
    height: 100px; 
    width: 100px; 
    border-radius: 50px; 
    background-color: red; 
    animation-name: anim; 
    animation-duration: 3s; 
    position: relative; 

} 

Voir la démo ici: http://codepen.io/EightArmsHQ/pen/avKwRr

Answer 3

Vous pouvez utiliser:

top: 100vh 

où 100vh signifie 100% de la hauteur de la fenêtre verticale. En outre, si vous ne voulez pas un livre sur la page, vous pouvez régler « overflow: hidden » sur le corps ou faire cesser le cercle juste à temps:

top: calc(100vh - 100px) 

Exemple: https://jsfiddle.net/4sjf2t9y/