body {
  text-align: center;
}

#list-of-projects li {
  position: relative;
  margin: auto;
  padding: 0;
  list-style-type: none;
  background: lightgray;
  width: 600px;
  height: 300px;
  border: 5px black;
  
  transform: translate(-1000%,0);
  animation-name: slideIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

#list-of-projects li img {
  position: absolute;
  left: 1cm;
}

#list-of-projects li #text {
  text-align: left;
  position: absolute;
  right: 1cm;
  width: 7cm;
  height: 5cm;
  overflow-y: hidden;
}

@keyframes slideIn {
  0% { transform: translate(-1000%,0); }
  100% { transform: translate(0%,0); }
}