封装动画特效

/*左飞入*/
@keyframes lefteaseinAnimate{0%{opacity:0;transform:translateX(-100%)}
to{opacity:1;transform:translateX(0)}
}
@-webkit-keyframes lefteaseinAnimate{0%{opacity:0;-webkit-transform:translateX(-100%)}
to{opacity:1;-webkit-transform:translateX(0)}
}
.fly_left{animation:lefteaseinAnimate 1s ease 1;-webkit-animation:lefteaseinAnimate 1s ease 1;-ms-animation:lefteaseinAnimate 1s ease 1;-o-animation:lefteaseinAnimate 1s ease 1;-moz-animation:lefteaseinAnimate 1s ease 1;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards}
/*右飞入*/
@keyframes righteaseinAnimate{0%{opacity:0;transform:translateX(100%)}
to{opacity:1;transform:translateX(0)}
}
@-webkit-keyframes righteaseinAnimate{0%{opacity:0;-webkit-transform:translateX(100%)}
to{opacity:1;-webkit-transform:translateX(0)}
}
.fly_right{animation:righteaseinAnimate 1s ease 1;-webkit-animation:righteaseinAnimate 1s ease 1;-moz-animation:righteaseinAnimate 1s ease 1;-ms-animation:righteaseinAnimate 1s ease 1;-o-animation:righteaseinAnimate 1s ease 1;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards}
/*淡入淡出*/
@-webkit-keyframes fadeIn{0%,50%{opacity:0}
to{opacity:1}
}
.fade{-webkit-animation-name:fadeIn;-webkit-animation-duration:3s;-webkit-animation-iteration-count:1;-webkit-animation-delay:0s}
/*旋转*/
@-webkit-keyframes gogogo{0%{-webkit-transform:rotate(0);border:5px solid red}
50%{-webkit-transform:rotate(180deg);background:#000;border:5px solid #ff0}
100%{-webkit-transform:rotate(360deg);background:#fff;border:5px solid red}
}
.loading{-webkit-animation:gogogo 2s infinite linear;}