CODEWITHSUNDEEP
htmlcssscrollcss-transitions
rdanusha
rdanusha

Reputation: 923

CSS webkit-animation scroll top

I'm not very good in CSS.

Following CSS continuously scroll the background image.

But I need to do is scroll top and stop the animation of the background image. Could you please help me on this matter. 

body {
     background-image: url(<?php echo get_template_directory_uri().'/img /sas-sport-bg.jpg'; ?>);

    -webkit-animation:400s scroll  linear;
    -moz-animation:400s scroll  linear;
    -o-animation:400s scroll  linear;
    -ms-animation:400s scroll  linear;
    animation:400s scroll  linear;
}
 @-webkit-keyframes scroll{
    0%{
        background-position:0px 0px;
    }
}
@-moz-keyframes scroll{
    20%{
        background-position:0px -1000px;
    }
}
@-o-keyframes scroll{
    40%{
        background-position:0px -1000px;
    }
}
@-ms-keyframes scroll{
    80%{
        background-position:0px -1000px;
    }
}
@keyframes scroll{
    100%{
        background-position:0px -1000px;
    }
}

Upvotes: 0

Views: 404

Answers (1)

Amr Labib
Amr Labib

Reputation: 4073

You can set the animation-fill-mode to forwards in your animation to stop the animation at the last state.

check the code below:

body {
         background-image: url(<?php echo get_template_directory_uri().'/img /sas-sport-bg.jpg'; ?>);

        -webkit-animation:400s scroll  linear forwards;
        -moz-animation:400s scroll  linear forwards;
        -o-animation:400s scroll  linear forwards;
        -ms-animation:400s scroll  linear forwards;
        animation:400s scroll  linear forwards;
    }
     @-webkit-keyframes scroll{
        100%{
            background-position:0px -1000px;
        }
    }
    @-moz-keyframes scroll{
        100%{
            background-position:0px -1000px;
        }
    }
    @-o-keyframes scroll{
        100%{
            background-position:0px -1000px;
        }
    }
    @-ms-keyframes scroll{
        100%{
            background-position:0px -1000px;
        }
    }
    @keyframes scroll{
        100%{
            background-position:0px -1000px;
        }
    }

Upvotes: 2

Related Questions