理论上我们用一种动画就好了，为什么还要在两中动画之间切换呢？
我们先来看一个场景。微信上的从屏幕左边缘向右滑的返回操作。在手指滑动的时候当前页面是跟随手指移动的，要返回的页面出现在划开的地方。跟随手指移动的动画不用说大家应该知道是要通过 JS 来实现的。然后手指放开，如果手指移动超过屏幕一半的宽度，那么就是返回操作，这时候会有个动画效果，当前页面会继续向右移动，直至屏幕边缘消失。将要显示的一个页面也会有一个动画效果，从左侧移出，直至填充满全屏幕。当手指离开屏幕之后的动画效果应该是通过 CSS 来实现。
这里就会存在从 JS 动画，到 CSS 动画的一个切换过程。事实上 JS 动画是通过连续的改变一个或若干个 CSS 属性来实现动画效果。CSS 动画主要是通过 transition 或者 animation CSS 属性来实现。这里主要是讨论 JS 动画与 animation CSS 动画（一下简称 animation）之间的切换。
animation 指定动画的开始状态与结束状态。因为我们是从 JS 动画切换到 animation 的，那么开始状态是不确定的。现在也还没有一种 API 能够让 JS 去改变创建好的 fragment 的。所以我们在写 animation 的时候是不能指定开始状态，刚好没有开始状态的 fragment 在 CSS 中是合法存在的。
这里还有一个不能指定 animation 开始状态的原因，是因为 fragment 里面的 CSS 属性是优先级最高的，甚至超过 !important。那么我们 JS 动画所做的努力就白费了，不管我们手指移动到什么位置，如果指定了开始状态的 animation，那么 animation 一定会从开始的地方执行动画。
假如我们手指移动到了屏幕的中间，而这时候我们设置了 animation 动画开始的地方是屏幕的最左侧。当我们放开手指的时候，页面会闪到最左边然后开始执行 animation。这不是我们希望看到的。所以一定不要指定 animation 的开始状态。
至此理论上的东西都已经说完了。接下来就看实现。