Comment faire des éléments CSS coulissants?

Question

J'essaye de faire une animation CSS qui fait glisser l'élément en avant sur l'écran, il ne fonctionne pas pour une raison quelconque. Je suis nouveau à cela, voici ce que j'ai pour cela:

/* sliding animation */ 
    @keyframes slide { 

     from { 
      left:0%; 

     } 
     to { 
      left:100%; 
     }  
    } 
    .bubble { 
     background-color:#147efb; 
     border-radius:50%; 
     border:2px solid black; 
     margin:10px; 
     height:70px; 
     width:70px; 
     animation-name:slide; 
     animation-duration:4s; 
     animation-iteration-count:infinite; 
     animation-direction: alternate ; 

    } 

Answer 1

Pour utiliser leftrightbottom et top vous devez définir le récipient avec position:relative et l'objet avec position:absolute (ou fixed si vous le voulez toujours visible en ignorant la barre de défilement).

Utilisez la méthode CSS calc() pour réduire la taille de l'objet de la longueur finale (left:100%) et box-sizing:border-box afin de réduire également sa bordure.

body { 
 
    width: 100%; 
 
    height: 100vh; 
 
    margin: 0px; 
 
    background: #76bdd5; 
 
} 
 

 
@keyframes slide { 
 
    from { 
 
    left: 0%; 
 
} 
 
    to { 
 
    left: calc(100% - 70px); 
 
}  
 
} 
 

 
.bubble { 
 
    top: 60px; 
 
    height: 70px; 
 
    width: 70px; 
 
    position: absolute;  
 
    border-radius: 50%; 
 
    border: 2px solid rgba(173, 216, 230, 0.5); 
 
    background: rgba(173, 216, 230, 0.4); /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(rgba(173, 216, 230, 0.8), rgba(173, 216, 230, 0.1)); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(rgba(173, 216, 230, 0.8), rgba(173, 216, 230, 0.1)); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(rgba(173, 216, 230, 0.8), rgba(173, 216, 230, 0.1)); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(rgba(173, 216, 230, 0.8), rgba(173, 216, 230, 0.1)); /* Standard syntax */  
 
    animation-name: slide; 
 
    animation-duration: 4s; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
    box-sizing: border-box; 
 
    opacity: 0.8; 
 
} 
 

 
.bright { 
 
    top: 70px; 
 
    margin-left: 16px; 
 
    height: 0px; 
 
    width: 0px; 
 
    position: absolute;  
 
    border-radius: 50%;  
 
    background-color: white; 
 
    box-shadow: 10px 10px 10px 10px white; 
 
    animation-name: slide; 
 
    animation-duration: 4s; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
    opacity: 0.8 
 
} 
 

 
.container { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
}

<div class=container> 
 
<div class=bubble></div><div class=bright></div> 
 
</div>