הוספת סליידר html+css ללא js

<p class="item-1">כאן תוסיפו טקסט שיופיע בסלייד הראשון</p>

<p class="item-2">כאן תוסיפו טקסט שיופיע בסלייד השני</p>

<p class="item-3">כאן תוסיפו טקסט שיופיע בסלייד השלישי</p>

body { 
  color: #FFFFFF; 
}

.item-1, 
.item-2, 
.item-3 {
  position: absolute;
  display: block;
  top: -12rem;
  right: 20%;
  z-index: 1;
  width: 65%;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2),
    0 6px 6px 0 rgba(0, 0, 0, 0.19);
  padding: 25px 40px 25px 40px;
  
  font-size: 2.5rem;
  animation-duration: 30s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

@keyframes anim-1 {
  0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 1; }
  33.33%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
  0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 25%; opacity: 1; }
  66.66%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
  0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}