之前群里有朋友问过这样的问题，类似直播平台的用户在小程序上线时如何实现排队动画？作为前端工程师，解决方案无外乎以下两种：使用javascript根据条件控制元素的样式实现队列动画和使用纯css3配合数据驱动模型实现。大家都知道，在现代的web开发中，我们尽可能的使用Css来达到效果。使用Js，所以我们应该优先使用Css3来实现，但是我们需要结合数据流来实现真正的队列动画，所以我们可以使用MVVM框架方便的数据驱动模型来控制动画的方向。并且因为动画的核心在于css3，原理其实在小程序或者Vue/React中都是类似的，不用担心技术栈问题。下面是实现后的效果图：如果上面的gif无法访问，可以查看下面的静态图：其实这个效果用在很多地方，比如B站的弹幕，粉丝的直播动图一个音乐平台，以及某个音乐平台的动画。直播等，但是在Web端，如何实现呢？接下来笔者就带大家一步步实现这样的动画效果。要实现上面的动画效果，首先要对动画进行分析，如上图动画结构如下：动画分为以下两个过程：用户进入动画和用户淡出。还有一个细节就是不管有多少用户进入，都是从同一个位置进入的。这时候，之前用户的位置就会上移。如下图所示：所以实现这个效果最好的方法就是使用定位，比如绝对定位（absolute）或者固定定位（fixed）。并设置其bottom值，如下代码所示：.animateWrap{position:absolute;bottom:40%;left:12px;}以上位置信息仅供参考，具体值可根据自己更改需要。设置bottom的好处是一旦添加了容器的子元素，就会自动将之前的元素推到顶部。我们需要手动设置它的偏移值。实现入口动画，如果我们要实现上图中的用户入口动画，可以使用css3的过渡动画transition或者animation动画。由于场景使用方便，我们这里使用动画动画。首先我们来写dom结构：/>
