css切入动画

1.自下而上

.class{
	animation: slide-down 0.3s ease-in-out;
}
@keyframes slide-down{
  0%{transform:translateY(100%);}
  100%{transform:translateY(0px);}
}

2.自上而下

.class{
	animation: slide-up 0.3s ease-in-out;
}
@keyframes slide-up{
  0%{transform:translateY(0px);}
  100%{transform:translateY(100%);}
}

3.自右而左

.class{
	animation: fold-left-in .3s ease-in-out;
}
@keyframes fold-left-in {
  0% {
   transform: translateX(100%);
  }
  100% {
   transform: translateX(0);
  }
}

4.自左而右

.class{
	animation: fold-out .3s ease-in-out;
}
@keyframes fold-out {
  0% {
   transform: translateX(0);
  }
  100% {
   transform: translateX(-100%);
  }
}