css3延时-CSS动画弹跳

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

在做项目的时候，我们经常会遇到动画的使用。 以前动画都是用js写的，通过setTimeout函数或者window.requestAnimationFrame()来实现目标元素的动画效果。 后者虽然解决了刷新频率和联通频率同步的问题，但由于频繁对dom进行js操作带来的额外费用和复杂的估算公式，促使大多数开发者回避使用原生js动画，而求助于各种插件动画。 。 这似乎是 HTML 的一个弱点。 在制作网站动画时css3延时，JS无论是功效还是性能都比Flash落后很多步。 所以当html5和css3的标准出现后，情况发生了变化，大多数人从复杂的js动画转向稍微简单的css动画。 CSS3为我们提供了一个很棒的API来实现以前需要花费大量精力才能实现的功能。 只需非常简单的代码，任何人都可以快速学习 CSS 动画。 下面是一个沿Y轴上下移动的动画示例（这里使用webkit内核作为默认标准，实际情况需要自行兼容）：

转换：

.mydiv {

宽度：100px；

高度：100px；

背景：红色；

-webkit-transition:all2s;

.newClass {

-webkit-transform:translateY(100px)

动画片：

@-webkit-keyframes mymove {

来自{顶部：0px;}

到{顶部：200px;}

.mydiv {

宽度：100px；

高度：100px；

背景：红色；

位置：相对；

-webkit-animation:mymove2sforwards;/* Safari 和 Chrome */

以上是CSS动画常用的两种写法。 对于简单的动画，通常首选第一种变换类型。 如果需要做复杂的变换，可以使用第二种动画方法，将帧的状态写入不同的运动帧上。

很多时候我们需要知道动画什么时候完成以及完成后需要做什么。 换句话说，动画完成需要一个回调函数。 在js动画中，你不需要害怕找不到回调函数，因为动画本身完全依赖js，而回调只是一个普通的函数。 首先，路追也习惯性的用js思维来思考这个问题。 现在我们知道了动画变化时间css3延时，我们就可以使用delay来解决回滚的问题了。下面是delay的方法

//css中的代码可以看到动画持续2s

vardelay = 2000；

setTimtout(函数(){

做一点事（）

}，延迟）;

上面的方法并不难理解。 如果延迟执行某个函数，延迟时间就是动画发生变化的时间。 这样看来，动画完成后该函数就会立即执行。 然而，这种方法有许多严重的缺陷。 首先，setTimeout函数和css动画不一定一致。 因为动画开始时间和setTimeout时间严格来说并不一致，要么函数提前执行，要么动画提前结束。 其次，js代码和css代码耦合。 任何时候延迟时间都必须遵循css中的时间。 如果css代码发生变化或者js代码发生变化，双方都要花时间进行修复和同步（即更改为一致的时间），这样就减少了工作量。 第三，多种动画会带来更多的代码量和不确定的激励。 由于每个计时器针对的是单独的动画元素，因此一旦动画元素增多，就必须添加更多的代码。 第四，它无法处理多个动画元素同时结束的情况。 等待。 。 。 。

上述缺点仅被部分发现。 对于复杂的动画，延迟函数是完全不适合的。 那么有什么办法可以解决动漫的反弹问题呢？ 答案其实是肯定的。 而且很简单，和之前的绑定点击风暴是一样的。 js提供了css3中两个动画的结局风暴。 有了它们，我们就可以轻松捕捉完成的动画了。

过渡结束

document.getElementById('my').addEventListener('transitionEnd', function(){

alert('变换动画已经完成！');

});

动画结束

document.getElementById('my').addEventListener('animationend', function(){

alert('动画已经完成！......');

});

正如我们所看到的，它们对于开发者来说一点也不陌生。 无论是用法还是字面名称，都让我们一目了然。 其实啰嗦的话还有很多，这篇博客主要就是两个风雨无阻的名字。 以下是它们的兼容治疗方法。 大多数浏览器都支持这两种风暴，基本上支持CSS3动画的浏览器都会支持这两种风暴。

补充一点：animationend只是动画的变化之一。 你应该能够想到其他变化的状态，没错：animationstart、animationiteration。 利用这三个状态时间，我们可以随心所欲地控制变化的动画效果。 尤其是动画迭代危机让我们能够在动画的变革过程中出手。

【今日微信公众号推荐↓】