不久前在某运动APP上看到一个卡片缓缓往下展示的效果，感觉这动画还可以
似乎项目中也有类似的卡片列表，列表的展示是直接显示出来的，加上动效之后应该更有活力，便照着样子实现了一下
这种效果，核心点就是添加了个CSS动画，主要控制了四个属性
先看HTML结构部分
<body> <article> <!-- 卡片容器 --> <div class="items"></div> <a href="javascript:;" class="items-more-btn">展开</a> </article> <!-- 模板结构 --> <script type="text/template" id="item-tpl"> <div class="item item__anim item__anim-{{index}}"> <h2>标题{{index}}</h2> <p>{{content}}</p> </div> </script