新年许愿活动动画总结

动画要点

• animation 动画参数

animation: 3s ease-in 1s infinite reverse both running slidein;

描述	CSS
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。开始和结束慢速ease-in 开始是慢速 ease-out 结束时慢速 ease-in-out 开始和结束时慢速
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。无限：infinite
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。Alternate逆向
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode	规定对象动画时间之外的状态。

规定动画完成一个周期所花费的秒或毫秒。默认是 0。

字母弹出动画

通过 index 做时间差

{this.state.textArr.map((text, index) => (
    <p key={index} style={{ animation: `fadeIn 2s linear ${index + 2}s both`}}>
        {text}
    </p>
))}

五个元素，自底向上弹出

两个元素为一组，设置不同的top, 相同的执行时间，不同的延迟时间

style={{animation: 'wishlistinfoone .8s ease-in-out 1s forwards'}}

style={{animation: 'wishlistinfotwo .8s ease-in-out 1.3s forwards'}}

style={{animation: 'wishlistinfothree .8s ease-in-out 1.6s forwards'}}

tag 随机弹出 抖动一下

随机数我们习惯取整，但是动画间隔根断，直接取1以内的小数即可，加上固定的数做扩大

style={{animation: `keywordsframe .2s ease-in-out ${(Math.random()+.8)}s forwards`}}

许愿瓶碰撞动画

这里碰撞想着挺难，其实就是把简单的生活尝试做一个代码输出

假如有三个元素在瓶子中依次排列 A B C 瓶子向右摇晃

C先撞到瓶子，然后回弹到左边。

B其实没有向右晃动，只是在接触到C的碰撞后，向上运动 然后落下

A由于B和C都晃动，A会向右晃动，然后回到中间落下

animation: 'move1 0.2s 2.5s 3,starBigDownframeone .5s linear forwards 2.5s '

@keyframes move1 {
  from {
    transform: translate(0.3rem, -0.3rem);
  }
  50% {
    transform: translate(0.5, -0.5rem);
  }
  to {
    transform: translate(0.2rem, -0.3rem);
  }
}



@keyframes starBigDownframeone {
	0% {
		transform: translate(0.3rem, -.3rem);
	  }
	  50% {
		transform: translate(1rem, -.3rem);
	  }
	  100% {
		transform: translate(.3rem, -.3rem);
	  }
}