p.desc {
  font-size: 1rem;
  opacity: 0;
  transition: 2s 1.5s;
}
/*code sample from here*/
/*
[required code]
parent {
  opacity: 0;
  perspective: xxx; //3d effective dose
}
parent span {
  //flip effect
  transform : rotateY(xxxdeg);  //you can also use 'rotateX' together.  
	(transform-origin : xxx;) //If you want.  
  //fade effect
  opacity: 0;
}
*/

.ex1 {
  opacity: 0;
  perspective: 200px;
}
.ex1 span {
  transform: translateY(50px);
  opacity: 0;
}

.ex2 {
  opacity: 0;
  transition: transform 2s;
  perspective: 200px;
}
.ex2 span {
  transition: opacity 1s !important;
  opacity: 0;
  display:inline-block;
}

.ex3 {
  opacity: 0;
  transition: transform 2s;
  perspective: 200px;
}
.ex3 span {
  transform: translateX(50px);
  opacity: 0;
}