CSS3的飞入飞出动画

在要动画的元素上加上样式

      animation: showModRight .6s ease-in;
      -webkit-animation: showModRight .6s ease-in;

linear ： 匀速
ease ： 由慢变快再慢
ease-in ：由慢变快
ease-out： 由快变慢
ease-in-out： 慢快慢
showModRight 和 showModLeft 见 下方自定义。

/* animate start */
@keyframes showModLeft {
   
  0% {
   
    -webkit-transform: translateX(-500px);
    transform: translateX(-500px);
    opacity: 0;
  }

  80% {
   
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 0.8;
  }

  100% {
   
    opacity: 1;