年终活动h5动画汇总点这里----♂--github--css3+react-id-swiper+react+redux+sagapostcss的Autoprefixer插件可以满足大部分oppo，vivo手机的兼容性问题。1、动画相关的主要内容：流星闪动、星晃动、人体移动（动画+监听动画结束时间）、桥梁铺垫、启程按钮、缩放旋转（+兼容）react-id-swiperswiper配合css3实现切换2.css3动画语法animationanimation-nameanimation-durationanimation-timing-functionvelocitycurveanimation-delayanimation-iteration-countanimation-directionplay-statefill-modetransformtransform属性对元素应用2D或3D转换。此属性允许我们旋转、缩放、移动或倾斜元素。其中transform-origin（属性更改转换后元素的中心）。三种转场的区别：动画动画、关键帧、往复运动。transition过渡，属性，触发动作，transient。transform变换，复杂的变换参数。3.示例https://github.com/hytStart/R...Meteor改变位置translate3d、透明度不透明度和大小比例。流星尾采用伪元素元素：旋转后-45deg（旋转基点向左transform-origin:left;）；可以用border来实现，靠近头部的越亮，靠近尾巴的越暗。.star{显示：块；宽度：5px；高度：5px；边界半径：50%；背景：#FFF；顶部：10px；左：200px；位置：相对；动画：star-ani6s无限缓出；框阴影：005px5pxrgba(255,255,255,.3);不透明度：1;}.star:after{content:'';显示：块；顶部：0px；左：40%；边框：0px实心#fff；边框宽度：0px90px2px90px；border-color:transparenttransparent透明rgba(255,255,255,.3);变换：旋转（-45deg）translate3d（1px，3px，0）；框阴影：001px0rgba(255,255,255,.1);transform-origin:left;}@keyframesstar-ani{0%{不透明度:0;变换：缩放（0）旋转（0）translate3d（0、0、0）；}50%{不透明度：1；变换：缩放（1）旋转（0）translate3d（-100px，100px，0）；}100%{不透明度：0;变换：缩放（1）旋转（0）translate3d（-200px，200px，0）；}}闪光星改变透明度.shine{background:url('../../../../images/action/icon-star1.png')无重复中心；背景大小：100%；宽度：30px；高度：40px；位置：绝对；顶部：90px；左：100px；不透明度：0；动画：opacity-change0.5sease-in-outinfinite;}@keyframesopacity-change{0%{opacity:0;}50%{不透明度：1；}100%{不透明度：0;}}单词分为两个动画，可以改变下降和上升的translateY。.text-item-0{位置：绝对；宽度：25px；高度：75px；顶部：60px；左：100px；background:url('../../../../images/action/S-start.png')无重复中心；背景大小：100%；animation:letter-01.5sease-in-outboth,letter-0-12.0sease-in-out1.5sboth;}@keyframesletter-0{0%{transform:translateY(0)}50%{transform:translateY(80px)}100%{transform:translateY(0px)}}@keyframesletter-0-1{0%{opacity:1;}100%{顶部：-80px；不透明度：0；}}人移动和切换dom，添加类控制移动和暂停，切换背景人物。收听动画结束事件。jsx{人们移动？{this.start2=start2}}/>:}css.people{宽度：20px；高度：64px；位置：绝对；左：10px；顶部：130px；背景：url('../../../../images/action/people.png')无重复中心；背景大小：100%；不透明度：0；动画：peopleUp1sease-in-out0.5sboth;}.people_move{background:url('../../../../images/action/people_moveleft.gif');背景大小：100%100%；背景位置：中心；背景重复：不重复；宽度：20px；高度：64px；位置：绝对；左：10px；顶部：130px；不透明度：1；动画：PeopleMove1.5s线性0s两者；}.people_paused{width:20px;高度：64px；背景：url('../../../../images/action/people.png');b背景尺寸：100%100%；背景位置：中心；背景重复：不重复；动画播放状态：暂停；}@keyframespeopleUp{0%{不透明度：0；}100%{不透明度：1;}}@keyframesPeopleMove{0%{左：10px；顶部：130px；}100%{顶部：20px；左：180px；背景大小：100%100%；背景位置：中心；背景重复：不重复；}}//监听动画结束组件DidUpdate(){const{peopleMove}=this.stateif(peopleMove){this.start2.addEventListener('animationend',this.end)this.start2.addEventListener('webkitAnimationEnd',this.end)this.start2.addEventListener('mozAnimationEnd',this.end)this.start2.addEventListener('oAnimationEnd',this.end)}}桥的出现匹配background-size:cover;属性现实.brige{宽度：0px；背景：url('../../../../images/action/bridge.png');背景尺寸：封面；背景重复：不重复；高度：100px；位置：绝对；顶部：40px；左：30px；动画：BridgeFadeIn3s线性两者；不透明度：0；}@keyframesBridgeFadeIn{0%{宽度：0px；不透明度：0；}100%{宽度：200px；:1;}}Gradientlarge(startjourney)使用transformscale2D进行尺度变换。.icon-ciecle{显示：块；位置：绝对；左：100px；顶部：80px；宽度：30px；高度：30px；background:url('../../../../images/action/icon-light.png')无重复中心；背景大小：100%；动画：warn1.2sease-in-out0sinfiniteboth;}@keyframeswarn{0%{transform:scale(0.1);不透明度：0.0；}25%{变换：缩放（0.2）；不透明度：0.3；}50%{变换：缩放（0.4）；不透明度：0.5；}75%{变换：缩放（0.6）；不透明度：0.7；}100%{变换：缩放（0.8）；不透明度：0.0；}}旋转动画-播放状态：暂停；ios的不行，animation动画不能写在新的类里，必须写在一个类里。（测试的时候发现这里有疑点。）.music_img{宽度：40px;高度：40px；显示：块；位置：绝对；左：100px；顶部：80px；动画：旋转3s线性无限；动画播放状态：运行；}.rotate-pause{动画播放状态：暂停；}@keyframes旋转{0%{变换：旋转（0deg）；}100%{变换：旋转（360deg）；}}react-id-swiperReact版本的Swiper，基本api都支持，目测相当于Swiperv4。不一定通过api。也可以通过重写css来实现。如果重写css切换效果，会影响自身的动画效果，所以可以通过添加非滑动来控制。1..swiper-wrapper{transition-delay:1.6s;}2.noSwiping:true,noSwipingClass:'stop-swiping',Swiper实现的迷宫切换1.swiper的效果属性和控件背景图片的不透明度都是利用时差最终效果来实现的。包括迷宫的切换，背包人的出现和消失，还有弹窗的出现和消失。2.swiper属性的activeIndex可以用来滑动到哪个页面，可以通过改变dom或者改变class来控制页面动画。//根据activeIndex获取的页数，控制页码状态的变化，通过切换dom和添加类实现进入和退出字段的动画效果。//添加一个不能滑动的停止滑动控件类。动画结束后，可以继续滑动下一页。constmazeStyle=classNames({[styles['maze-1']]:true,[styles['maze-out']]:firstMazeOut,})constpeopleStyle=classNames({[styles['people-1']]:true,[styles['people-out']]:firstMazeOut,})constpopCardStyle=classNames({[styles['pop-card-container']]:true,[styles['pop-card-out']]:firstMazeOut,}){firstMazeIn？
