cssによるスクロール表示効果の実現

私のここは20本のデータの循環の展示で、ページは同時に4本のデータを展示することができて、一回の循環の20 s
シームレスなスライドを実現するには、前の4つのデータを最後に追加する必要があります.そうしないと、データの過渡(サイクルが終わると瞬時に引き戻され、元の位置が再び下にスライドするため)が発生します.つまり、24のデータがあります.
くだらないことを言わないで、直接コードをつけます
スライド機能を実現する主なコード

@keyframes myMove {
	  0% {
	    transform: translateY(0);
	  }
	  100% {
	    transform: translateY(-500%);//          ，        5*height
	  }
	}

animation: myMove 20s linear infinite;
		animation-fill-mode: forwards;

 
 
コンポーネントコード全体

	export default {
		name: 'scroll',
		props:['scrolldata'],
		data() {
			return {
				

			}
		},
		methods: {
			
		},
		watch:{
			scrolldata(newval,oldval){
				var cent = document.getElementById("scroll-data");
				cent.innerHTML=''
				if(newval.length!==0){
					for(var i = 0; i < newval.length; i++) {
						cent.innerHTML += "<li class='info'>"+ 
									"<div  class='list-info'>" + newval[i].comminName + "</div>"+
									"<div class='list-info'>" + newval[i].userName + "</div>" +
									"<div class='list-info'>" + newval[i].garbageTypeName + "</div>" +
									"<div class='list-info'>" + newval[i].garbageNumber + "</div>" +
									"<div class='list-info'>" + newval[i].recycleTime + "</div>" +
									"</li>";
					}
					for(var i = 0; i < 4; i++) {
						cent.innerHTML += "<li class='info'>"+ 
									"<div  class='list-info'>" + newval[i].comminName + "</div>"+
									"<div class='list-info'>" + newval[i].userName + "</div>" +
									"<div class='list-info'>" + newval[i].garbageTypeName + "</div>" +
									"<div class='list-info'>" + newval[i].garbageNumber + "</div>" +
									"<div class='list-info'>" + newval[i].recycleTime + "</div>" +
									"</li>";
					}
				}
			}
		}
	}