Wie macht man gleitende CSS-Elemente?

Question

Ich versuche, eine CSS-Animation zu erstellen, die das Element über den Bildschirm zurück schiebt, es läuft aus irgendeinem Grund nicht. Ich bin auf diese ziemlich neu, hier ist das, was ich für sie haben:

/* 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

verwenden leftrightbottom und top Sie den Behälter mit position:relative und das Objekt mit position:absolute (oder fixed wenn Sie es wollen immer festlegen müssen sichtbar ignoriert die Bildlaufleiste).

Verwenden Sie die CSS-Methode calc(), um die Objektgröße von der endgültigen Länge (left:100%) und box-sizing:border-box zu reduzieren, um den Rand zu verkleinern.

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>