.fadein {
   opacity: 0;
   transition-property: opacity;
   transition-duration: 1s;
   transition-timing-function: linear;
 }
 .fadeup {
   transform: translateY(50px);
   opacity: 0;
   transition-property: transform, opacity;
   transition-duration: 1s;
   transition-timing-function: linear;
 }
.fadedown {
   transform: translateY(-50px);
   opacity: 0;
   transition-property: transform, opacity;
   transition-duration: 1s;
   transition-timing-function: linear;
 }
.fadeleft {
   transform: translateX(-150px);
   opacity: 0;
   transition-property: transform, opacity;
   transition-duration: 1s;
   transition-timing-function: linear;
 }
.faderight {
   transform: translateX(150px);
   opacity: 0;
   transition-property: transform, opacity;
   transition-duration: 1s;
   transition-timing-function: linear;
 }
.fadeupleft {
   transform: translateY(50px) translateX(-150px);
   opacity: 0;
   transition-property: transform, opacity;
   transition-duration: 0.6s;
   transition-timing-function: linear;
 }
.fadeupright {
   transform: translateY(50px) translateX(150px);
   opacity: 0;
   transition-property: transform, opacity;
   transition-duration: 0.6s;
   transition-timing-function: linear;
 }
.fadedownleft {
   transform: translateY(-50px) translateX(-150px);
   opacity: 0;
   transition-property: transform, opacity;
   transition-duration: 0.6s;
   transition-timing-function: linear;
 }
.fadedownright {
   transform: translateY(-50px) translateX(150px);
   opacity: 0;
   transition-property: transform, opacity;
   transition-duration: 0.6s;
   transition-timing-function: linear;
 }
.rotateright {
   transform: rotate(90deg);
   opacity: 0;
   transition-property: transform, opacity;
   transition-duration: 0.6s;
   transition-timing-function: linear;
 }
.rotateleft {
   transform: rotate(-90deg);
   opacity: 0;
   transition-property: transform, opacity;
   transition-duration: 0.6s;
   transition-timing-function: linear;
 }.in-view {
     transform: none;
     opacity: 1;
 }