使用 CSS 动画

2024-07-09 12:09| 来源: 网络整理| 查看: 265

利用动画事件可以更好的控制动画和信息。这些事件由 AnimationEvent对象表示，可探测动画何时开始结束和开始新的循环。每个事件包括动画发生的时间和触发事件的动画名称。我们将修改滑动文本示例，输出每个动画事件出现时的信息。

css.slidein { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; animation-name: slidein; -moz-animation-iteration-count: 3; -webkit-animation-iteration-count: 3; animation-iteration-count: 3; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; animation-direction: alternate; } @-moz-keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } @-webkit-keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } 添加动画事件监听器

我们使用 JavaScript 代码监听所有三种可能的动画事件，setup() 方法设置事件监听器，当文档第一次加载完成时执行该方法。

jsvar e = document.getElementById("watchme"); e.addEventListener("animationstart", listener, false); e.addEventListener("animationend", listener, false); e.addEventListener("animationiteration", listener, false); e.className = "slidein";

以上是非常标准的代码写法，setup() 最后设置动画元素的 class 为 slidein，启动动画。为什么这样做？因为 animationstart 事件在动画一开始时就被触发，在我们的示例中，该事件在我们的代码执行前就被触发，所以我们自己通过设置元素的 class 来启动动画。

接收事件

事件传递给listener()函数，代码如下所示

jsfunction listener(e) { var l = document.createElement("li"); switch (e.type) { case "animationstart": l.innerHTML = "Started: elapsed time is " + e.elapsedTime; break; case "animationend": l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; break; case "animationiteration": l.innerHTML = "New loop started at time " + e.elapsedTime; break; } document.getElementById("output").appendChild(l); }

这段代码同样非常简单，简单地通过event.type来判断发生的是何种事件，然后添加对应的注解到中。

输出结果如下所示：

Started: elapsed time is 0 New loop started at time 3.01200008392334 New loop started at time 6.00600004196167 Ended: elapsed time is 9.234000205993652

注意以上时间非常接近预期时间，但不是完全相等。也要注意在最后一个周期完成后，不会触发animationiteration事件，而触发animationend事件。

HTML 代码

下面是示例中的用到的 HTML 代码：

html Watch me move This example shows how to use CSS animations to make h1 elements move across the page. In addition, we output some text each time an animation event fires, so you can see them in action.

【本文地址】

使用 CSS 动画

使用 CSS 动画

今日新闻

推荐新闻