css动画

1.

/******************************    入场类动画        ******************************/
/* 淡入 */
@-webkit-keyframes animation-fadeIn{
  0% {opacity:0}
  100% {opacity:1}
}
/* 放大进入 */
@-webkit-keyframes animation-scaleIn{
  0% {-webkit-transform: scale(0);opacity:0}
  100% {-webkit-transform: scale(1);opacity:1}
}
/* 向右飞入 */
@-webkit-keyframes animation-slideInRight{
  0%{-webkit-transform:translateX(-100%);opacity:0}
  100%{-webkit-transform:translateX(0);opacity:1}
}
/* 向左飞入 */
@-webkit-keyframes animation-slideInLeft{
  0%{-webkit-transform:translateX(100%);opacity:0}
  100%{-webkit-transform:translateX(0);opacity:1}
}
/* 向上飞入 */
@-webkit-keyframes animation-slideInUp{
  0%{-webkit-transform:translateY(100%);opacity:0}
  100%{-webkit-transform:translateY(0);opacity:1}
}
/* 向下飞入 */
@-webkit-keyframes animation-slideInDown{
  0%{-webkit-transform:translateY(-100%);opacity:0}
  100%{-webkit-transform:translateY(0);opacity:1}
}

/******************************    出场类动画        ******************************/
/* 淡出 */
@-webkit-keyframes animation-fadeOut{
  0% {opacity:1}
  100% {opacity:0}
}
/* 缩小退出 */
@-webkit-keyframes animation-scaleOut{
  0% {-webkit-transform: scale(1);}
  100% {-webkit-transform: scale(0);opacity:0}
}
/* 向右飞出 */
@-webkit-keyframes animation-slideOutRight{
  0%{-webkit-transform:translateX(0);}
  100%{-webkit-transform:translateX(100%);opacity:0;}
}
/* 向左飞出 */
@-webkit-keyframes animation-slideOutLeft{
  0%{-webkit-transform:translateX(0);}
  100%{-webkit-transform:translateX(-100%);opacity:0;}
}
/* 向上飞出 */
@-webkit-keyframes animation-slideOutUp{
  0%{-webkit-transform:translateY(0);}
  100%{-webkit-transform:translateY(-100%);opacity:0;}
}
/* 向下飞出 */
@-webkit-keyframes animation-slideOutDown{
  0%{-webkit-transform:translateY(0);}
  100%{-webkit-transform:translateY(100%);opacity:0;}
}

/* 上滑提示动画 */
@-webkit-keyframes animation-indicator-prev{
  0%{opacity:0;-webkit-transform:translateY(50%);}
  40%{opacity:1;-webkit-transform:translateY(0%);}
  80%{opacity:0;-webkit-transform:translateY(-50%);}
  100%{opacity:0;-webkit-transform:translateY(50%)}
}

/******************************    组件动画        ******************************/
.fadeIn{
  -webkit-animation:animation-fadeIn .5s 1;
}
.fadeOut{
  -webkit-animation:animation-fadeOut .5s 1 forwards;
}
.scaleIn{
  -webkit-animation:animation-scaleIn .5s 1;
}
.scaleOut{
  -webkit-animation:animation-scaleOut .5s 1 forwards;
}
.slideInDown{
  -webkit-animation:animation-slideInDown .5s 1;
}
.slideOutDown{
  -webkit-animation:animation-slideOutDown .5s 1 forwards;
}
.slideInUp{
  -webkit-animation:animation-slideInUp .5s 1;
}
.slideOutUp{
  -webkit-animation:animation-slideOutUp .5s 1 forwards;
}
.slideInLeft{
  -webkit-animation:animation-slideInLeft .5s 1;
}
.slideOutLeft{
  -webkit-animation:animation-slideOutLeft .5s 1 forwards;
}
.slideInRight{
  -webkit-animation:animation-slideInRight .5s 1;
}
.slideOutRight{
  -webkit-animation:animation-slideOutRight .5s 1 forwards;
}

/******************************    翻页动画        ******************************/
.fade-enter{
  -webkit-animation: animation-fadeIn 1s ;
}
.fade-leave{
  -webkit-animation: animation-fadeOut 1s forwards;
}
.slideLeft-enter{
  -webkit-animation:animation-slideInRight 1s;
}
.slideLeft-leave{
  -webkit-animation:animation-slideOutRight 1s forwards;
}
.slideRight-enter{
  -webkit-animation:animation-slideInLeft 1s;
}
.slideRight-leave{
  -webkit-animation:animation-slideOutLeft 1s forwards;
}