スライド式のCSS要素を作成するには？

Question

私は要素を画面の向こうにスライドさせるCSSアニメーションを作成しようとしていますが、それは何らかの理由で実行されていません。私は、これまでかなりの新たなんだ、ここで私はそれのために持っているものです。

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

leftrightbottomを使用するとtopあなたは常にそれをしたい場合は、position:absolute（またはfixedでposition:relativeとコンテナとオブジェクトを設定する必要がありますスクロールバーを無視して表示）。

CSS calc()メソッドを使用して、オブジェクトのサイズを最終的な長さ（left:100%）からbox-sizing:border-boxに減らして、境界線も小さくします。

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>