html - CSS webkit-动画滚动顶部

Question

我的 CSS 不是很好。

跟随CSS不断滚动背景图片。

但我需要做的是滚动到顶部并停止背景图像的动画。你能帮我解决这个问题吗？

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;
    }
}

Answer 1

您可以在动画中将 animation-fill-mode 设置为 forwards 以在最后一个状态停止动画。

检查下面的代码:

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;
        }
    }