那些年让我们头疼的CSS3动画

这是笔者整理的个人在CSS3动画上遇到的问题，全部都是笔者个人的经验，以及解决方案，并不相信网上会有重复的文章。大家可以点进每个小栏目的codeplay去地直观feel一下。

常见错误：Animation篇

首先先来复习一下animation的有哪些属性：

属性名	默认	作用
animation-name	none	keyframe 的名字
animation-duration	0s	运行总时长
animation-timing-function	ease	运行的速度变化，总不可能总是匀速吧
animation-delay	0s	延迟时间
animation-iteration-count	1	重复的次数，也可以是无限的infinite
animation-direction	normal	动画执行方向，可以正着来，也可以反着来reverse
animation-fill-mode	none	important 动画结束之后和开始之前的状态，是不是动画未开始的时候就是默认样式，结束的时候又返回默认样式。
animation-play-state	running	动画的状态，注意如果说这个时候动画运行结束了，状态也是running，因为这个running不是表示动画正在运行，而是一种状态，有没有被强行暂停。

常见错误一：动画做完就disappear了！喂喂喂！没让你消失啊。code play~

这个应该是animation中的基础题，所以放在了第一位。这个问题的解决方案就是animation-fill-mode这个属性没有设置或者设置错误。这个属性从专业的角度来说是动画的一个延续，就是0~100%的keyframe走完之后和开始之前的归宿。简单地来说就是动画结束之后或者开始之前，当前元素的状态是否保留动画最后一帧的状态或者未开始之前使用第一帧的样式。这个属性默认是不保留状态，也就是说开始之前是原始状态，开始之后才开始转换样式，结束之后会立刻切换至原始状态，仿佛这个动画不曾存在过。这里的forwards是指动画结束之后（无论是正着来还是倒这来）的状态，backwards是指动画delay的时候的状态。both就很简单了，包含了结束之后和开始之前的状态。当然大家更喜欢both，这样就不用考虑之前或者之后的问题了。

常见错误二：怎么停不下来，想控制动画的动态。code play~

这里我们可以借用animation-play-state来控制动画的是否继续。划重点，这边的是否继续并不包含重新开始。

那么，我可不可以通过控制animation-direction的值来控制动画的重新开始呢？比如我一个动画reverse一下之后又重新开始了。emmm，想法很好，但是现实很残酷。animation的time很智能，比如我在动画的途中改变了动画，然后animation会根据当前时间的反方向的状态获取状态，然后从哪个点开始执行，也就是说在动画途中改变direction，最终动画还是按照原来的时间执行，也就是除非取消动画，否则动画的时间是固定的（当然会有一些小误差）。所以想利用direction来让动画动起来就是太天真了。

既然如此，我可不可以来回动呢，比如一个element，我希望他可以从左到右再从右到左。这个时候animation-direction可以设置为alternate，这样就会控制奇偶次数的不同动画范围，but！动画次数要>1，不然哪里来的奇偶呀～

这里有一篇CSS triks上详细讲解如何重新开始动画的博客，Restart CSS Animation

常见错误：Transition篇

复习一下transition的各个属性值。

transition属性	默认值	作用
transition-delay	0	延迟
transition-duration	0	变换速度
transition-property	all	变化属性，默认监控全部变化，如果只需要某一个值比如transform，就只监听transform即可。
transition-timing-function	ease	时间函数

只有我一个人觉得Transition是一个大坑吗，感觉比animation更难以驾驭。

常见错误三：是我眼花了吗，怎么直接结束了，仿佛不曾存在过。play code

有一种情况，我在页面首次渲染地时候就对transform进行了修改，想着只要改变tranform，transition就会工作。但是这个transition地工作性质是对比当前渲染状态和上一次渲染状态的的差别。因此像这个样子改变，在首次渲染之前就改变了transform，transition失去了对比的参照物，然后就不动了，解决这个问题可以用requestAnimationFrame解决，这个方法就是用于渲染前的最后一步也就是paint之前的一步，然后修改了layout，最后transition感受到了召唤，识别出了差别，就正常工作了起来。

FailTransition.style.transform="translateX(100px)"
requestAnimationFrame(()=>{
  SuccessTransition.style.transform="translateX(100px)"
})

步骤大概是这样的：

Recalculate Style>Layout>requestAnimationFrame>Recalculate Style>Layout>Update Layer Tree>Paint>Composite Layers

还有一种情况，就是我们希望这个元素可以先向右再向左，根据上次的经验我们可以这么写，但是失效了，为什么呢？因为点击之后设置的样式，还没抵达paint就被requestAnimationFrame重写了，然后就按照最后一次的样式和上一次渲染的样式做了对比，进行了变换。

change.addEventListener("click",()=>{
    ChangeFrequency.style.transform="translateX(10000px)"
    requestAnimationFrame(()=>{
        ChangeFrequency.style.transform="translateX(50px)"
    })
})

为了解决这个问题我们可以双重requestAnimationFrame。然而可以看到生效了，但是transition会自动修复，1s内完成的动画，绝不会超时，因此我们的动画悲剧没有按照我们设定的那样向右移动1s之后再向左执行1s，而是总时间1s，所以会闪现结束。

change.addEventListener("click",()=>{
    ChangeFrequency.style.transform="translateX(10000px)"
    requestAnimationFrame(()=>{
        requestAnimationFrame(()=>{
            ChangeFrequency.style.transform="translateX(50px)"
        }）
    })
})

至于如何实现串联动画，我的第一选择是animation，第二选择是监听transitionend事件，当地一个动画结束后再执行之后的动画。

function moveBack(){
  ChangeFrequencyFix.style.transform="translateX(50px)"
  ChangeFrequencyFix.removeEventListener("transitionend",moveBack)
}
ChangeFrequencyFix.addEventListener("transitionend",moveBack)

常见错误四：怎么回事！怎么从奇怪的地方出现了！这是一个小bug。code play

理想是从左上到右下，然后放大，动画结束后，重新从原点出发，从上放大滑动到下方，然后却直接从右下平行滑动到了最后的位置，这个小bug可以说是作死。因为transition的特性是保留上一次动画的最后一帧，然后过渡到新的状态，如果不想要某一个状态的重置，记得关闭transition，否则就会出现连续的动画。

function goTrravel(){
  correctToGo.removeEventListener("transitionend",goTrravel)
  correctToGo.style.transition="none"
  correctToGo.classList.remove("active")
  requestAnimationFrame(()=>{ 
    requestAnimationFrame(()=>{ 
      correctToGo.classList.add("pop")
      correctToGo.style.transition="transform 2s,opacity 2s"
    })
  })
}
correctToGo.addEventListener("transitionend",goTrravel)

因为transition是实时监控的，所以如果如果去除了transform的状态，他会回到default的状态。因此，如果想要抛弃回到初始化或者某一状态需要重置transition。

常见错误五：喂喂喂，你怎么还在这个层下面，我都给你z-index:1000了，你快出来啊。动画提升层code play

这里需要提出两个概念一个是css context stack，MDN参考网址

一般情况下如果想要层级高，就用z-index设置就可以了。甚至父节点A的层级低于父节点B的层级，但是，再没有提升层的情况下，同一层中父节点A的子节点可以高于父节点B的层级。但是若是产生了提升层，除非整个父节点A高于父节点B，父节点A中的子节点才可以高于父节点B的层级。

下图就是一个例子，大家可以看见下面这个产生提升层的情况，里面的黄色子节点是无法突破红色节点的，因为他们已经处于不同的层了。z-index只作用于当前层，没有跨层处理的能力。

常见错误六：will-change和translateZ(0)作用是一样的。

这一块，我们都知道如果想要加速GPU渲染就使用类似于hack的translateZ(0)或者是CSS新属性will-change，那么这两者的原理是什么，具体的使用情况是什么？

其实他们就是一个提升层的概念，将之后可能会改变的元素从当前的层中抽离，阻止composition，这样这部分修改的时候就不会影响整个页面的布局，从而阻止了reflow。

那么translateZ(0)的作用是否和will-change一样呢？不！

虽然他们都是提升层，但是will-change带有缓存作用，也就是说change的内容会被缓存，只有第一动画回paint之后的重复动画就不会再绘制，但是translateZ(0)每次动画都会重新绘制。可以说will-change对于重复动画很有好了。但是！不要滥用哦~will-change会缓存，因此很占内存。大家慎用。

参考链接：

youtu.be/cCOL7MC4Pl0 ， JS conf上面讲evenloop的视频，里面的evenloop和渲染的关系对笔者的启发很大。
developer.mozilla.org/zh-CN/docs/… ， MDN是研究CSS必备网站。
www.w3.org/TR/2016/WD-… ，如果想要深入研究layer这一块，可以参考CSS的规范，可以又更深入的感受。不过CSS的规范是给大家深入学习CSS的，并不是教大家如何使用的。

注:

原创声明！全部都是笔者一个字一个字敲出来，代码是笔者一个个code出来的。

欢迎转载，注明出处。