/*animation*/
@-webkit-keyframes scaleUpAnimation {
    from { opacity:0;-webkit-transform: scale(0.5); }
    to { opacity:1;-webkit-transform: scale(1); }
}
@-moz-keyframes scaleUpAnimation {
    from { opacity:0;-moz-transform: scale(0.5); }
    to { opacity:1;-moz-transform: scale(1); }
}
@-o-keyframes scaleUpAnimation {
    from { opacity:0;-o-transform: scale(0.5); }
    to { opacity:1;-o-transform: scale(1); }
}
@keyframes scaleUpAnimation {
    from { opacity:0;transform: scale(0.5); }
    to { opacity:1;transform: scale(1); }
}

@-webkit-keyframes scaleDownAnimation {
    from { opacity:0;-webkit-transform: scale(1.5); }
    to { opacity:1;-webkit-transform: scale(1); }
}
@-moz-keyframes scaleDownAnimation {
    from { opacity:0;-moz-transform: scale(1.5); }
    to { opacity:1;-moz-transform: scale(1); }
}
@-o-keyframes scaleDownAnimation {
    from { opacity:0;-o-transform: scale(1.5); }
    to { opacity:1;-o-transform: scale(1); }
}
@keyframes scaleDownAnimation {
    from { opacity:0;transform: scale(1.5); }
    to { opacity:1;transform: scale(1); }
}

@-webkit-keyframes upDownAnimation {
    from { transform:translate3d(0,0,0); }
    to { transform:translate3d(0,5px,0); }
}
@-moz-keyframes upDownAnimation {
    from { transform:translate3d(0,0,0); }
    to { transform:translate3d(0,5px,0); }
}
@-o-keyframes upDownAnimation {
    from { transform:translate3d(0,0,0); }
    to { transform:translate3d(0,5px,0); }
}
@keyframes upDownAnimation {
    from { transform:translate3d(0,0,0); }
    to { transform:translate3d(0,5px,0); }
}

@-webkit-keyframes slideUpAnimation {
    from { opacity:0;-webkit-transform: translate3d(0,30px,0); }
    to { opacity:1;-webkit-transform: translate3d(0,0,0); }
}
@-moz-keyframes slideUpAnimation {
    from { opacity:0;-moz-transform: translate3d(0,30px,0); }
    to { opacity:1;-moz-transform: translate3d(0,0,0); }
}
@-o-keyframes slideUpAnimation {
    from { opacity:0;-o-transform: translate3d(0,30px,0); }
    to { opacity:1;-o-transform: translate3d(0,0,0); }
}
@keyframes slideUpAnimation {
    from { opacity:0;transform: translate3d(0,30px,0); }
    to { opacity:1;transform: translate3d(0,0,0); }
}

@-webkit-keyframes slideDownAnimation {
    from { opacity:0;-webkit-transform: translate3d(0,-50px,0); }
    to { opacity:1;-webkit-transform: translate3d(0,0,0); }
}
@-moz-keyframes slideDownAnimation {
    from { opacity:0;-moz-transform: translate3d(0,-50px,0); }
    to { opacity:1;-moz-transform: translate3d(0,0,0); }
}
@-o-keyframes slideDownAnimation {
    from { opacity:0;-o-transform: translate3d(0,-50px,0); }
    to { opacity:1;-o-transform: translate3d(0,0,0); }
}
@keyframes slideDownAnimation {
    from { opacity:0;transform: translate3d(0,-50px,0); }
    to { opacity:1;transform: translate3d(0,0,0); }
}

@-webkit-keyframes opacityAnimation {
    from { opacity:0;}
    to { opacity:1;}
}
@-moz-keyframes opacityAnimation {
    from { opacity:0;}
    to { opacity:1;}
}
@-o-keyframes opacityAnimation {
    from { opacity:0;}
    to { opacity:1;}
}
@keyframes opacityAnimation {
    from { opacity:0;}
    to { opacity:1;}
}

@-webkit-keyframes opacityAnimationRvs {
  from { opacity:1;}
  to { opacity:0;}
}
@-moz-keyframes opacityAnimationRvs {
  from { opacity:1;}
  to { opacity:0;}
}
@-o-keyframes opacityAnimationRvs {
  from { opacity:1;}
  to { opacity:0;}
}
@keyframes opacityAnimationRvs {
  from { opacity:1;}
  to { opacity:0;}
}

[data-ani="css"][data-ani-style="slide-up"]{
  opacity: 0;
}
[data-ani="css"][data-ani-style="slide-up"].ani-on {
  animation: slideUpAnimation 1s .2s forwards cubic-bezier(0.12, 0.4, 0.41, 0.86);
}

[data-ani="css"][data-ani-style="slide-down"]{
  opacity: 0;
}
[data-ani="css"][data-ani-style="slide-down"].ani-on {
  animation: slideDownAnimation 1s .2s forwards cubic-bezier(0.12, 0.4, 0.41, 0.86);
}

[data-ani="css"][data-ani-style="opacity"] {
  opacity: 0;
}
[data-ani="css"][data-ani-style="opacity"].ani-on {
  animation: opacityAnimation 1.5s .2s forwards;
}