Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Animation problem0

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #147229
    Astronaut
    Participant

    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

    #147231
    Paulie_D
    Member

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

    #147235
    Astronaut
    Participant

    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 ??

    #147245
    Paulie_D
    Member

    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?

    #147246
    Paulie_D
    Member

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

    You would have to play with the relevant properties etc.

    #147268
    Astronaut
    Participant

    thanks Paulie_D

    you cleared my doubts , thanks :)

    #147887
    Astronaut
    Participant

    this is what i wanted to make… moving border

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.