1.Animate.css简介
Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库。非常适合强调，首页，滑块和引导注意的提示。它是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。虽然借助Animate.css能够很方便、快速的制作 CSS3 动画效果，但还是建议看看Animate.css的代码，也许你能从中学到一些东西。不论是在Web端和小程序内都可以正常使用，详细内容请到官方地址学习。
2.动画效果的实现
在使用过程中，可以根据自己的喜好来改造css代码来达到你想要的效果，文中动图显示可能不是特别直观，建议自己写一遍代码，即利于学习，又能够直观的体会到动画效果。
1.发光的盒子
wxml代码：
<viewid="box">I am LetCode!</view>
wxss代码：
@keyframesanimated-border{0%{box-shadow:0000rgba(255,255,255,0.4); }100%{box-shadow:00020pxrgba(255,255,255,0); }}#box{animation:animated-border1.5sinfinite;height:100rpx;font-family:Arial;font-size:18px;font-weight:bold;color:white;border:2pxsolid;border-radius:10px;margin:100px15px;line-height:100rpx;text-align:center;}
2.文字的缩放效果
wxml代码：
<viewclass="animate_zoomOutDown">关注公众号“Let编程”,有更多分享！</view>
wxss代码：
@keyframeszoomOutDown{40%{opacity:1;transform:scale3d(0.475,0.475,0.475)translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19); }to{opacity:0;transform:scale3d(0.1,0.1,0.1)translate3d(0,2000px,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1); }}.animate_zoomOutDown{animation:2slinear0sinfinitealternatezoomOutDown;font-family:Arial;font-size:18px;font-weight:bold;color:white;margin-top:70px;text-align:center;margin-top:15px;}
3.加载动画
wxml代码：
<viewclass="load-container load"><viewclass="loader"></view></view><viewclass="txt">关注公众号“Let编程”,有更多分享！</view>
wxss代码：
.load-container{width:240px;height:240px;margin:0auto;position:relative;overflow:hidden;box-sizing:border-box;}.load.loader{color:#ffffff;font-size:90px;text-indent:-9999em;overflow:hidden;width:1em;height:1em;border-radius:50%;margin:72pxauto;position:relative;transform:translateZ(0);animation:load1.7sinfiniteease,round1.7sinfiniteease;}@keyframesload{0%{box-shadow:0-0.83em0-0.4em,0-0.83em0-0.42em,0-0.83em0-0.44em,0-0.83em0-0.46em,0-0.83em0-0.477em;}5%,95%{box-shadow:0-0.83em0-0.4em,0-0.83em0-0.42em,0-0.83em0-0.44em,0-0.83em0-0.46em,0-0.83em0-0.477em;}10%,59%{box-shadow:0-0.83em0-0.4em,-0.087em-0.825em0-0.42em,-0.173em-0.812em0-0.44em,-0.256em-0.789em0-0.46em,-0.297em-0.775em0-0.477em;}20%{box-shadow:0-0.83em0-0.4em,-0.338em-0.758em0-0.42em,-0.555em-0.617em0-0.44em,-0.671em-0.488em0-0.46em,-0.749em-0.34em0-0.477em;}38%{box-shadow:0-0.83em0-0.4em,-0.377em-0.74em0-0.42em,-0.645em-0.522em0-0.44em,-0.775em-0.297em0-0.46em,-0.82em-0.09em0-0.477em;}100%{box-shadow:0-0.83em0-0.4em,0-0.83em0-0.42em,0-0.83em0-0.44em,0-0.83em0-0.46em,0-0.83em0-0.477em;}}@keyframesround{0%{transform:rotate(0deg); }100%{transform:rotate(360deg); }}
4.抖动的文字
wxml代码：
<viewclass="shake-slow txt">关注公众号“Let编程”,有更多分享！</view>
wxss代码：
@keyframesshake-slow{2%{transform:translate(6px,-2px)rotate(3.5deg); }4%{transform:translate(5px,8px)rotate(-0.5deg); }6%{transform:translate(6px,-3px)rotate(-2.5deg); }8%{transform:translate(4px,-2px)rotate(1.5deg); }10%{transform:translate(-6px,8px)rotate(-1.5deg); }12%{transform:translate(-5px,5px)rotate(1.5deg); }14%{transform:translate(4px,10px)rotate(3.5deg); }16%{transform:translate(0px,4px)rotate(1.5deg); }18%{transform:translate(-1px,-6px)rotate(-0.5deg); }20%{transform:translate(6px,-9px)rotate(2.5deg); }22%{transform:translate(1px,-5px)rotate(-1.5deg); }24%{transform:translate(-9px,6px)rotate(-0.5deg); }26%{transform:translate(8px,-2px)rotate(-1.5deg); }28%{transform:translate(2px,-3px)rotate(-2.5deg); }30%{transform:translate(9px,-7px)rotate(-0.5deg); }32%{transform:translate(8px,-6px)rotate(-2.5deg); }34%{transform:translate(-5px,1px)rotate(3.5deg); }36%{transform:translate(0px,-5px)rotate(2.5deg); }38%{transform:translate(2px,7px)rotate(-1.5deg); }40%{transform:translate(6px,3px)rotate(-1.5deg); }42%{transform:translate(1px,-5px)rotate(-1.5deg); }44%{transform:translate(10px,-4px)rotate(-0.5deg); }46%{transform:translate(-2px,2px)rotate(3.5deg); }48%{transform:translate(3px,4px)rotate(-0.5deg); }50%{transform:translate(8px,1px)rotate(-1.5deg); }52%{transform:translate(7px,4px)rotate(-1.5deg); }54%{transform:translate(10px,8px)rotate(-1.5deg); }56%{transform:translate(-3px,0px)rotate(-0.5deg); }58%{transform:translate(0px,-1px)rotate(1.5deg); }60%{transform:translate(6px,9px)rotate(-1.5deg); }62%{transform:translate(-9px,8px)rotate(0.5deg); }64%{transform:translate(-6px,10px)rotate(0.5deg); }66%{transform:translate(7px,0px)rotate(0.5deg); }68%{transform:translate(3px,8px)rotate(-0.5deg); }70%{transform:translate(-2px,-9px)rotate(1.5deg); }72%{transform:translate(-6px,2px)rotate(1.5deg); }74%{transform:translate(-2px,10px)rotate(-1.5deg); }76%{transform:translate(2px,8px)rotate(2.5deg); }78%{transform:translate(6px,-2px)rotate(-0.5deg); }80%{transform:translate(6px,8px)rotate(0.5deg); }82%{transform:translate(10px,9px)rotate(3.5deg); }84%{transform:translate(-3px,-1px)rotate(3.5deg); }86%{transform:translate(1px,8px)rotate(-2.5deg); }88%{transform:translate(-5px,-9px)rotate(2.5deg); }90%{transform:translate(2px,8px)rotate(0.5deg); }92%{transform:translate(0px,-1px)rotate(1.5deg); }94%{transform:translate(-8px,-1px)rotate(0.5deg); }96%{transform:translate(-3px,8px)rotate(-1.5deg); }98%{transform:translate(4px,8px)rotate(0.5deg); }0%,100%{transform:translate(0,0)rotate(0); }}.shake-slow{animation:shake-slow5sinfiniteease-in-out;}
在实际开发过程中，远不止这些炫酷的动画效果，在互联网迅速的发展状态下，还需要更多的程序员来实现功能需求，因此本文只做简单的介绍，未完待续.....
