在WeGame[1]的PC端官网首页，有很多基于滚动的制作精良的动画效果。这里我简单截取两个比较有意思的转场动画给大家感受一下。转场动画1：转场动画2：是不是很有趣？整个动画的连接是基于滚轮的滚动来触发的。我的猜测是使用了类似于TweenMaxJS[2]的动画库。当然，这两个很酷很有趣的过渡动画，可以根据最新的CSS@scroll-timeline规范大致实现。本文将尝试使用纯CSS来模拟以上两种转场动画。当然，关于最新的CSS@scroll-timeline规范，如果你还没有详细看过，可以先看看我的文章。来了，终于来了，动画杀手@scroll-timeline[3]。转场动画1首先我们来看一下这个动画：核心步骤拆解：在场景1中，然后借助WeGame的LOGO，LOGO开始放大，当LOGO放大到一定程度时，开始淡出，LOGO后面的场景2逐渐淡入。LOGOFinder淡出，场景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。不太了解的可以点此查看：高级裁剪技巧！基于单幅图??像的任意颜色变换[4]。我们简单修改一下代码：div{background:linear-gradient(-75deg,#715633,#2b2522);mask:url(//wegame.gtimg.com/g.55555-r.c4663/wegame-home/sc01-logo.52fe03c4.svg),线性渐变(#fff,#fff);掩码重复：不重复；遮罩位置：中心中心；-webkit-mask-composite:xor;}这样，我们就可以成功得到这样的图形：当然，这里需要注意的是白色区域不是白色的，而是透明的，可以显露出后面的内容.配合@scroll-timeline就好了。这样，在上面的裁剪层的基础上，再配合@scroll-timeline，我们来模拟一个基本的动画效果：