//////required propaties from here//////
.animatedText1 {
  opacity : 0;
  span {
    position: relative;
    top: 10px;
    left: 10px;
    opacity: 0;
  }
}

.animatedText2 {
  opacity : 0;
  span {
    position: relative;
    left: -10px;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}


.appear{
    -ms-flex-item-align: start;
    align-self: flex-start;  
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    overflow: hidden;
    -webkit-transition: opacity 2s,-webkit-transform 0.7s;
    transition: opacity 2s,-webkit-transform 0.7s;
    -o-transition: opacity 2s,transform 0.7s;
    transition: opacity 2s,transform 0.7s;
    transition: opacity 2s,transform 0.7s,-webkit-transform 0.7s;
    margin-bottom: 20px;

}
.appear.animated{
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}