动画一)简介1.由于目前的动画技术还不稳定,所以必须要考虑浏览器的兼容性问题。2.写动画不需要任何js基础。3、通过@keyframes定义动画,并在一定时间内改变css的属性4)语法1、定义动画【style标签内部定义】@keyframes动画名称{from{}//from为关键帧,其中动画开始到{}//到是关键帧,动画结束的地方}==>等价于@keyframes动画名{0%{}100%{}}@keyframes动画名{0%{}25%{}50%{}75%{}100%{}}使用百分比好处是不仅可以标记开始位置和结束位置的关键帧,还可以在某个需要使用的地方设置关键帧animationanimation-name动画名称(在@keyframes中定义的动画名称)animation-duration动画持续时间,单位秒animation-delay动画延迟时间,单位秒,即当前文件在浏览器中第一次打开后多少秒??,动画会再执行一次-iteration-countanimationtimesinfiniteinfinitytimesn[integer]规定动画执行n次animation-timing-functionanimationspeedcurvelinearlinear[uniformspeed]ease-in先慢后快ease-out先快后慢ease-in-out先慢后快再慢steps(5)逐帧动画animation-fill-mode动画动画结束时向前填充,元素停在结束位置backwards默认动画结束时,元素停在起始位置animation-play-state动画播放和pauserunningplaypausedpause可以实现光标悬停在元素上后,元素暂停动画播放动画草图:animation:animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state2.动画库animate.css1)下载1.通过npm【包管理机制】>npminstall--saveanimate.csselement-uiaxiosjQueryboostrap2.通过cdn引入在线链接[使用需要联网]bootcdnxxxcdn
