@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{
  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%;

}


.about-text.right p {
    animation: appear-right linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

/* /This ensures the problematic 'Vision' paragraph (which has this class)  */
   /* ignores all transforms/animations, allowing the center alignment rules to work. */
/* */ 
p.no-anim { 
    animation: none !important;
    transform: none !important;
}