@keyframes appear {
  from{
    opacity: 0;
    scale: 0.5;
  }
  to{
    opacity: 1;
    scale: 1;
  }
}
@keyframes appear-left{
  from{
    opacity: 0;
    transform: translateX(-100px);
  }
  to{
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes appear-right{
  from{
    opacity: 0;
    transform: translateX(100px);
  }
  to{
    opacity: 1;
    transform: translateX(0px);
  }
}

img{
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 25%;

}

 .placeholder-img , .card ,.h3.add-page,.card-child{
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
#summary,.contact-form,p{
  animation: appear-right linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  
}
.xx,.info,.keypoints{
  animation: appear-left linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;

}