如何制作滑动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

要使用left right bottom和top，您必须使用position:relative设置容器，并使用position:absolute（或{{ 1}}如果你想要它总是可见忽略滚动条。）

使用CSS fixed方法从最终长度（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;
}