css animation 重复剪切图像

Question

I would like to create some css animation on the home page of my site, with some notes falling. Here is the example: http://labandallonnaise.org/joomla/ (link no longer demonstrates behavior) We can see that the notes are falling, then we have nothing before the next sequence.

Here is the code

.notes-wrapper {
    overflow: hidden;    
    height: 630px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin-top: -75px;
    margin-bottom: -75px;
    margin-left: -500px;
    margin-right: -500px;
}

.notes {
    background: url("gantry-theme://custom/images/background.svg") center !important;
    height: 6300px;
    animation: fall 10s linear infinite;
    overflow: hidden;
    z-index: 0;
    background-repeat: repeat;
    background-size: cover;
    top: 0px;
}

.notes img {
    animation: none;
    background: transparent;
}

@keyframes fall {
    0% {
        transform: translateY(-1050px);
    }   
}

<div class="notes-wrapper"> 
  <img style="display: block; margin-left: auto; margin-right: auto; animation: none; background: transparent;" src="images/logo/BandAllonnaisedudule.png" alt="" />
  <div class="notes"> </div>
</div>

how can I have continuous animation?

Answer 1

It depends on exactly what effect you want with various viewport aspect ratios.

Whatever the details, you need two copies of the SVG so that you don't get a gap when one has reached the bottom and starts again.

Here's one way to get continuity which puts before and after pseudo elements on the notes div both of which animate down the full height of the viewport. One starts in the viewport, the other above it.

This is a simplistic way of doing it as it doesn't require you to know anything about the aspect ratio of the background image. It would be possible to get better control and produce different results depending on what you'd like to happen on narrow or wide devices. For example, should the notes always fit in completely horizontally, however small they then go? Should there always be only one copy of the background however wide the device and so on.

 .notes-wrapper { overflow: hidden; position: relative; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100vw; height: 100vh; }.notes { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; }.notes::before, .notes::after { content: ''; background-image: url("https://ahweb.org.uk/background.svg"); position: absolute; height: 100%; width: 100%; animation: fall 10s linear infinite; overflow: hidden; z-index: -1; background-repeat: repeat no-repeat; background-size: auto 100%; background-position: center; }.notes::before { top: -100%; }.notes::after { top: 0; } @keyframes fall { 100% { transform: translateY(100vh); } }

 <div class="notes-wrapper"> <img style="display: block; margin-left: auto; margin-right: auto; animation: none; background: transparent;" src="images/logo/BandAllonnaisedudule.png" alt="" /> <div class="notes"></div> </div>