2018-10-10 18:03:03 -04:00
|
|
|
|
---
|
|
|
|
|
id: 587d78a8367417b2b2512ae3
|
2020-12-16 00:37:30 -07:00
|
|
|
|
title: 使用无限的动画计数制作永不停止的动画
|
2018-10-10 18:03:03 -04:00
|
|
|
|
challengeType: 0
|
2020-02-11 15:46:34 +08:00
|
|
|
|
videoUrl: 'https://scrimba.com/c/cVJDVfq'
|
|
|
|
|
forumTopicId: 301041
|
2018-10-10 18:03:03 -04:00
|
|
|
|
---
|
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
# --description--
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
之前的关卡里介绍了一些动画属性以及 `@keyframes` 规则的用法。还有一个常用的动画属性是 `animation-iteration-count`,这个属性允许你控制动画循环的次数。下面是一个例子:
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
`animation-iteration-count: 3;`
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
在这里动画会在运行 3 次后停止,如果想让动画一直运行,可以把值设置成 infinite。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
# --instructions--
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2021-01-08 11:20:48 -08:00
|
|
|
|
把 `animation-iteration-count` 属性值改成 infinite,以使右边的球持续跳跃。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
# --hints--
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
`animation-iteration-count` 属性值应该为 infinite。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
```js
|
|
|
|
|
assert($('#ball').css('animation-iteration-count') == 'infinite');
|
2018-10-10 18:03:03 -04:00
|
|
|
|
```
|
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
|
# --solutions--
|
2020-02-11 15:46:34 +08:00
|
|
|
|
|