diff --git a/chapters/03/02.md b/chapters/03/02.md index 88d4597..7fc7151 100644 --- a/chapters/03/02.md +++ b/chapters/03/02.md @@ -30,6 +30,11 @@ 例子:[bouncer animation on Hop.ie](http://hop.ie/)。 使用`forwards`,动画播放一次并在最后一帧结束。【Tips:这个例子貌似没有啊,我翻遍了也没找到】 +> 这里多添了个例子来说明 forwards 和 backwards(原作者并没有写)。 +> 在这个[例子](https://codepen.io/jiangxiaoxin/pen/QzWYwG)里使用了 animation-delay 和 animation-fill-mode。从效果上来看,设置 backwards,点击“开始动画”之后,backwards 会立刻变成动画真实过程(animation-duration)第一帧的样子,一直持续整个 animation-delay 时间,然后开始变化,最后动画结束后又变回了最一开始没有添加动画时的状态。 + +![](../../images/animation-fill-mode.gif) + ### animation-iteration-count 这是动画播放的次数。默认情况下,它将播放一次。也可以指定一个数字,或指定"infinite"以使其永久循环。 diff --git a/images/animation-fill-mode.gif b/images/animation-fill-mode.gif new file mode 100644 index 0000000..37cf0e5 Binary files /dev/null and b/images/animation-fill-mode.gif differ