/* classes */
.opacity {animation: op 1s linear}
.slideleft {animation: sl 1s linear; animation-timing-function: cubic-bezier(.5,1,.5,1)}
.slideright {animation: sr 1s linear; animation-timing-function: cubic-bezier(.5,1,.5,1)}
.RotationX {animation: cwX 1s linear; animation-timing-function: cubic-bezier(.25,.1,.25,1)}
.RotationY {animation: cwY 1s linear; animation-timing-function: cubic-bezier(.25,.1,.25,1)}
.clockwiseZ {animation: cwZ 1s linear; animation-timing-function: cubic-bezier(.25,.1,.25,1)}
.counterclockwiseZ {animation: ccwZ 1s linear; animation-timing-function: cubic-bezier(.25,.1,.25,1)}

/* keyframes */
@keyframes op {0% {opacity:0;}100% {opacity:100;}}
@keyframes sl {from {left:100%;}to {left:0%;}}
@keyframes sr {from {right:100%;}to {right:0%;}}
@keyframes cwX {from {transform: rotateX(360deg);}to {transform: rotateX(0deg);}}
@keyframes cwY {from {transform: rotateY(360deg);}to {transform: rotateY(0deg);}}
@keyframes cwZ {from {transform: rotateZ(360deg);}to {transform: rotateZ(0deg);}}
@keyframes ccwZ {from {transform: rotateZ(0deg);}to {transform: rotateZ(360deg);}}