Animation problem0

[Astronaut]

all i want is when animation of first object gets over, second starts but the first one gets hidden and when again its turn come it will perform animation,

——1—–> 2 —–>3——>4——>1——->2——>3——->4—->infinite

#box{
        margin:0 auto;
        position:relative;
        width:500px;
        height:500px;
        border:1px solid rgba(255,255,255,.4);
        box-shadow:inset 1px 1px 3px #4f4f4f, inset 1px 1px 3px #4f4f4f, inset -1px -1px 3px #4f4f4f, inset -1px -1px 3px #4f4f4f;
        
        }
        
        #box:after{
        content:"";
        left:25px;
        top:25px;
        position:absolute;
        width:450px;
        height:450px;
        border:1px solid #4f4f4f;
        box-shadow:1px 1px 3px rgba(255,255,255,.4), 1px 1px 3px rgba(255,255,255,.4), -1px -1px 3px rgba(255,255,255,.4), -1px -1px 3px rgba(255,255,255,.4);
        
        }
        
        #top{
        position:absolute;
        
        top:3px;
        right:2px;
        
        height:0px;
        width:60px;
        border-top:20px solid yellow;
        border-left:22px solid transparent;
        border-right:22px solid transparent;
        -moz-animation:top 5s linear infinite;
        -webkit-animation:top 5s linear infinite;
    -o-animation:top 5s linear infinite;
    animation:top 5s linear infinite;
        }
        
        @-moz-keyframes top{
        0%{right:2px;}
        100%{right:80%;}
        }
    @-webkit-keyframes top{
        0%{right:2px;}
        100%{right:80%;}
        }
    @-o-keyframes top{
        0%{right:2px;}
        100%{right:80%;}
        }
    @keyframes top{
        0%{right:2px;}
        100%{right:80%;}
        }
        
        
        #left{
        position:absolute;
        
        top:2px;
        left:2px;
                
        height:60px;
        width:0px;
        
        border-left:22px solid yellow;
        border-top:20px solid transparent;
        border-bottom:22px solid transparent;
        -moz-animation:left 5s linear 5s infinite;
    -webkit-animation:left 5s linear 5s infinite;
    -o-animation:left 5s linear 5s infinite;
    animation:left 5s linear 5s infinite;}
        
        @-moz-keyframes left{
        0%{top:2px;}
        100%{top:80%;}
        }
        @-webkit-keyframes left{
        0%{top:2px;}
        100%{top:80%;}
        }
    @-o-keyframes left{
        0%{top:2px;}
        100%{top:80%;}
        }
    @keyframes left{
        0%{top:2px;}
        100%{top:80%;}
        }

        #bottom{
        position:absolute;
        
        left:2px;
        bottom:2px;
        
        height:0px;
        width:60px;
        
        border-bottom:20px solid yellow;
        border-left:22px solid transparent;
        border-right:22px solid transparent;
        -moz-animation:bottom 5s linear 10s infinite;
    -webkit-animation:bottom 5s linear 10s infinite;
    -o-animation:bottom 5s linear 10s infinite;
    animation:bottom 5s linear 10s infinite;}
        
        @-moz-keyframes bottom{
        0%{left:2px;}
        100%{left:80%;}
        }
    @-webkit-keyframes bottom{
        0%{left:2px;}
        100%{left:80%;}
        }
    @-o-keyframes bottom{
        0%{left:2px;}
        100%{left:80%;}
        }
    @keyframes bottom{
        0%{left:2px;}
        100%{left:80%;}
        }
        
        #right{
        position:absolute;
        
        bottom:2px;
        right:2px;
        
        height:60px;
        width:0px;
        
        border-right:22px solid yellow;
        border-top:20px solid transparent;
        border-bottom:22px solid transparent;
        -moz-animation:right 5s linear 15s infinite;
    -webkit-animation:right 5s linear 15s infinite;
    -o-animation:right 5s linear 15s infinite;
    animation:right 5s linear 15s infinite;}
        
        @-moz-keyframes right{
        0%{bottom:2px;}
        100%{bottom:80%;}
        }
    @-webkit-keyframes bottom{
        0%{left:2px;}
        100%{left:80%;}
        }
    @-o-keyframes bottom{
        0%{left:2px;}
        100%{left:80%;}
        }
    @keyframes bottom{
        0%{left:2px;}
        100%{left:80%;}
        }

moving border

[Paulie_D]

A Codepen would, perhaps, make this easier to understand because I’m not quite understanding what it is you are trying to do.

[Astronaut]

check my link then you will understand, what I’m saying….

top border when complete the animation then it will have to disappeared and left border start then bottom and then right but after right get disappeared top border moves ??

[Paulie_D]

So you only want one border visible at a time?

That just a matter of adjusting the timings/delays and display properties.

Each animation will run for the same amount of time (say 20s) [say 5s each]…but the DELAY on each one will be different and each object will only be visible for a specified 1/4 of the total animation when it’s moving

Do you see?

[Paulie_D]

Sort of like this: http://codepen.io/Paulie-D/pen/GIlyw

You would have to play with the relevant properties etc.

[Astronaut]

thanks Paulie_D

you cleared my doubts , thanks :)

[Astronaut]

this is what i wanted to make… moving border

[Author]

Posts