CSS3实现图片自动上下轮播

 <div className = 'scrollContainer'>
       <div className = 'scrollWrap'>
           <div className = 'scrollRow'><img /></div>
           <div className = 'scrollRow'><img /></div>
           <div className = 'scrollRow'><img /></div>
        </div>
 </div>

.scrollContainer {
              width: 80%;
              display: flex;
              align-items: center;
              background: rgba(255, 245, 245, 1);
              border-radius: 8px;
              border: 1px solid red;
              filter: blur(0px);
              margin-bottom: 12px;
              padding: 16px;
              font-size: 16px;
              font-weight: 400;

              .scrollWrap {
                height: 22px;
                overflow: hidden;
                position: relative;
                flex: 1;

                .scrollRow {
                  position: absolute;
                  height: 100%;
                  width: 100%;
                }
              }

              @keyframes anim1 {
                0% {
                  top: 0;
                  opacity: 1;
                }

                45% {
                  top: 0;
                  opacity: 1;
                }

                50% {
                  top: -100%;
                  opacity: 0;
                }

                51% {
                  top: 100%;
                  opacity: 0;
                }

                95% {
                  top: 100%;
                  opacity: 1;
                }

                96% {
                  opacity: 1;
                }

                100% {
                  top: 0;
                  opacity: 1;
                }
              }

              @keyframes anim2 {
                0% {
                  top: 100%;
                  opacity: 0;
                }

                45% {
                  top: 100%;
                  opacity: 0;
                }

                50% {
                  top: 0;
                  opacity: 1;
                }

                95% {
                  top: 0;
                  opacity: 1;
                }

                100% {
                  top: -100%;
                  opacity: 0;
                }
              }

              .scrollRow:nth-child(1) {
                animation: anim1 5s linear infinite;
              }

              .scrollRow:nth-child(2) {
                top: 25px;
                animation: anim2 5s linear infinite;
              }
            }