CODEWITHSUNDEEP
cssanimationsliding
Sarah Robson
Sarah Robson

Reputation: 11

How to make sliding css elements?

I am trying to make a CSS animation that slides the element back an forth across the screen, it isn't running for some reason. I'm pretty new to this, here is what I have for it:

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

     }

Upvotes: 1

Views: 83

Answers (1)

L777
L777

Reputation: 8457

To use left right bottom and top you must set the container with position:relative and the object with position:absolute (or fixed if you want it always visible ignoring the scrollbar).

Use the CSS calc() method to reduce the object size from the final lenght (left:100%) and box-sizing:border-box to reduce it's border aswell.

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>

Upvotes: 1

Related Questions