css动画重复切图

Question

我想在我的网站主页上创建一些 css 动画，其中有一些笔记会掉落。这是示例：~~http://labandallonnaise.org/joomla/~~（link 不再演示行为）我们可以看到音符在下降，然后在下一个序列之前我们什么都没有。

这是代码

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

怎样才能有连续的动画？

Answer 1

这完全取决于您想要的各种视口宽高比的效果。

无论细节如何，您都需要 SVG 的两个副本，这样当一个到达底部并重新开始时，您就不会出现间隙。

这是获得连续性的一种方法，它在注释 div 之前和之后放置伪元素，这两种元素都在视口的整个高度上进行动画处理。一个从视口开始，另一个在视口上方。

这是一种简单的方法，因为它不需要您了解背景图像的纵横比。根据您希望在窄设备或宽设备上发生的情况，可以获得更好的控制并产生不同的结果。例如，音符是否应该始终完全水平放置，无论它们变得多么小？无论设备有多宽，是否始终只有一份背景副本等等。

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

css动画重复切图

css animation repeat cuts the image

html

css

sass

css-animations