一、背景
接到一个需求，期中一个小模块的功能点要求是： 1、根据实际的文案长度，如果超长就3s后自动滚动缓慢至末尾； 2、滚动的时候要上面下面都要有消失渐变； 3、滚动完毕上面下面消失渐变要去掉。
类似如图要求：
二、思路
第一思维就是：渐变解决用一个线性渐变盖到上面；滚动用css3动画 keyframe top来控制动画。 问题就来了，实际的背景是个丰富的图，用线性渐变盖到上面会看到不该盖住的的地方也盖住了，很难看，另外内容是动态长度的，于是就放弃了该方案。 于是就想有没有自动内容高度不用计算自适应的方式实现：通过查询发现mask可以实现元素dom的部分渐变效果，1要求解决了；第2个要求又想到了用trasition+height解决，发现height自动长度auto时候是不生效的，后来根据网上查询的方案建议用max-height也替代height，设置max-height最够大，这样就能满足自动高度的要求；第3点要求，根据transition有动画结束监听事件transitonEnd；结合上面的方式，就有了实现整体方案。
三、实现
详见下面demo 点击start按钮开始，reset按钮重置：
四、欢迎指正不足支持之处
有不足之处感谢指正！
