.visible {
  opacity: 0;
  transition: transform 0.5s linear;
  animation-duration: 2.5s;
  animation-fill-mode: both;
}
/*　brightness　*/
.effect {
  animation-name: imgbrightness;
  opacity: 1;
  transition: .8s;
}
@keyframes imgbrightness {
  0% {
    opacity: 0;
    filter: brightness(300%);
	/*　明度300%　*/
  }
  100% {
    opacity: 1;
    filter: brightness(100%);
	/*　100%が基準値　*/
  }
}

.ani{
 
  opacity:0;
  transition-duration:1s;
}
.ani:nth-child(2n+1){


  transform:translateX(-300px);
}
.ani:nth-child(2n+0){

  
  transform:translateX(300px);
}
.ani:nth-child(2n+1).effect,
.ani:nth-child(2n+0).effect{
  transform:translateX(0);
  opacity:1;
}