在做项目的时候，我们经常会遇到动画的使用。 原来的情况是使用js编写动画，使用setTimeout函数或者window.requestAnimationFrame()来实现目标元素的动画效果。 其实前者解决的是刷新频率和联通频率同步的问题，而由于js频繁操作dom带来的额外费用和复杂的估算公式，大多数开发者都在叹息原生js动画，而使用各种插件动画。 这似乎是html的弱点。 在网站上制作动画时，无论从效果还是性能上，JS还是比flash落后很多步。 所以当html5和css3的标准出现后，这些情况发生了改变，大多数人从js复杂的动画转向了稍微简单的css动画。 CSS3为我们提供了一个很棒的api来实现以前需要花费大量精力的功能。 只需要非常简单的代码，任何人都可以快速学习css动画。 下面是一个沿Y轴上下移动的动画示例（这里以webkit内核为默认标准，实际情况需要兼容）：
转换：
.mydiv{
宽度：100px；
高度：100px；
背景：红色；
-webkit-transition：all2s；
.newClass{
-webkit-transform:translateY(100px)
动画片：
@-webkit-keyframesmymove{
来自{顶部：0px;}
到{顶部：200px;}
.mydiv{
宽度：100px；
高度：100px；
背景：红色；
位置：相对；
-webkit-animation:mymove2sforwards;/*Safari 和 Chrome*/
以上就是目前CSS动画常用的两种写法。 对于简单简单的动画，通常首选第一种类型的transoform。 如果需要做复杂的转换，可以使用第二种动画，它是通过将帧的状态写在不同的运动帧上来实现的。
很多时候，我们需要知道动画什么时候完成，以及完成后需要做什么。 也就是说动画完成需要一个反弹函数。 在js动画中，你不用担心找不到bounce函数，因为动画本身就依赖于js，而bounce只是一个普通的函数。 首先，路主也习惯性的用js的思维来思考这个问题。 既然知道了动画的变化时间，就可以使用延迟来解决返回的问题了。下面是延迟的方法
//css中的代码可以看到动画持续2s
vardelay=2000；
setTimtout(函数(){
做一点事（）
}， 延迟）;
里面的方法不难理解，延迟执行一个函数，延迟的长度就是动画变化的时间，这样看起来动画完成后函数就会立即执行。 而且，这些方法还存在许多严重的缺陷。 首先，setTimeout函数和css动画不一定一致。 由于动画的开始时间和setTimeout的时间并不严格一致css3 动画延时，要么函数会提前执行，要么动画会提前结束。 其次，js代码和css代码耦合。 延迟时间应始终遵循 CSS 中的时间。 如果css代码或者js代码发生变化，双方都需要花时间修复同步（即更改为一致的时间），这样就减少了工作量。 第三，多种动画会带来更多的代码量和不确定的激励。 由于每个计时器针对单独的动画元素，因此随着添加更多动画元素，必须添加更多代码。 第四，它无法处理多个动画元素同时结束的情况。 等待。 。 。 。
上述缺点仅被部分发现。 对于复杂的动画，延迟函数是完全不适合的。 有没有办法解决动漫的反响？ 答案其实是肯定的。 而且很简单，和之前的绑定点击风暴是一样的。 js提供了css3中两个动画的结局风暴。 有了它们，我们就可以轻松捕捉完成的动画了。
过渡结束
document.getElementById('my').addEventListener('transitionEnd', function(){
alert('变换动画已经完成！');
});
动画结束
document.getElementById('my').addEventListener('animationend', function(){
alert('动画已经完成！......');
});
正如我们所看到的css3 动画延时，它们对于开发者来说一点也不陌生。 无论是用法还是字面名称，都让我们一目了然。 虽然啰嗦了很多，但是这篇博客主要讲的是两个风雨飘摇的名字。 以下是它们的兼容效果。 大多数浏览器都支持这两种样式，基本上支持CSS3动画的浏览器都会支持这两种样式。
还要补充一件事：animationend 只是动画的变化之一。 你应该能够想到其他变化的状态，没错：animationstart、animationiteration。 借助这三个状态时间，我们可以随心所欲地控制变化的动画效果。 尤其是动画迭代的混乱可以让我们干预动画变化的过程。
【今日陌陌公众号推荐↓】
