在WeGame的PC官网首页，有很多制作精良的基于滚动的动画效果。这里我简单截取两个比较有意思的转场动画给大家感受一下。转场动画1：转场动画2：是不是很有趣？整个动画的连接是基于滚轮的滚动来触发的。我的猜测是使用像TweenMaxJS这样的动画库来实现它。当然，这两个很酷很有趣的过渡动画，可以根据最新的CSS@scroll-timeline规范大致实现。本文将尝试使用纯CSS来模拟以上两种转场动画。当然，关于最新的CSS@scroll-timeline规范，如果你还没有详细看过，可以先看看我的文章。来了，终于来了，动画杀手@scroll-timeline转场动画1首先我们来看一下这个动画：核心步骤拆解：场景一，然后借助WeGame的LOGO，LOGO开始放大，LOGO放大到一定程度，开始淡出，LOGO后面的场景2逐渐淡入，LOGO放大到淡出消失，场景2在这里完全出现。整个动画的实现，有一个很重要的场景，就是要能够使用LOGO元素，切掉背景，只能看到LOGO后面的元素，像这样得到一张图：注意，图片白色部分的,不是白色的，但需要透明才能显示其背后的元素。当然，我们可以让UI裁剪出这样的图片，但毕竟太麻烦了。假设我们只有一个LOGO元素：怎么用这个LOGO来切背景呢？Cutbackgroundwithmask和mask-composite是的，我们可以在这里使用mask。我们来试试看：
div{background:linear-gradient(-75deg,#715633,#2b2522);}假设我们有这样一个背景：我们以LOGO图作为MASK进行Cut：div{背景：线性渐变（-75deg，#715633，#2b2522）；mask:url(WeGame-LOGO图片.png);掩码重复：不重复；mask-position:centercenter;}我们会得到这样一张图：哦不，这和我们想象的刚好相反。我们要的是LOGO是透明的，其余的背景保留。怎么做？不要慌，这里可以使用我们上一篇介绍的-webkit-mask-composite。不太了解的可以点此查看：高级裁剪技巧！基于单张图片的任意颜色转换，我们简单修改一下代码：div{background:linear-gradient(-75deg,#715633,#2b2522);掩码：url（//wegame.gtimg.com/g.55555-r.c4663/wegame-home/sc01-logo.52fe03c4.svg），线性渐变（#fff，#fff）；掩码重复：不重复；遮罩位置：中心中心；-webkit-mask-composite:xor;}这样，我们就可以成功得到这样一个图形：当然，这里需要注意的是白色区域不是白色的，而是透明的，可以显露出后面的内容。配合@scroll-timeline就好了。这样，在上面的裁剪层的基础上，再配合@scroll-timeline，我们来模拟一个基本的动画效果：