Skip to content

Commit

Permalink
modify 0302
Browse files Browse the repository at this point in the history
  • Loading branch information
shiwenna committed Dec 10, 2018
1 parent 673eea0 commit 8d1e7bc
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions chapters/03/02.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
#Animation properties
# Animation properties

在我们介绍动画示例之前,先了解一下`animation`的属性。

`transition`属性一样,`animation`可以使用简写属性形式,也可以单独指定这些属性。

###animation-delay
### animation-delay

`transition-delay`类似,此属性表示在开始之前动画的等待时间。在定义多个动画的情况下特别有用。

如果在定义循环动画的情况下,delay属性不会应用于每次循环。delay只在元素定义动画的时候生效。

实际上可以给这个属性一个负值,比如`-1s`。表示动画立即开始,就像上一个已经过去一样。

###animation-direction
### animation-direction

动画通常从0%开始,以100%结束。`animation-direction`使用`normal``reverse``alternate``alternate-reverse`来控制方向。

Expand All @@ -28,7 +28,7 @@

使用`forwards`表示当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。在动画显示之前,`backwards`返回第一个关键帧。

例子:[bouncer animation on Hop.ie]http://hop.ie/)。使用`forwards`,动画播放一次并在最后一帧结束。
例子:[bouncer animation on Hop.ie](http://hop.ie/)使用`forwards`,动画播放一次并在最后一帧结束。

### animation-iteration-count

Expand Down Expand Up @@ -68,7 +68,7 @@

话虽如此,`cubic-bezier`计时功能在与动画一起使用时可以产生一些很好的效果,所以可以尝试一下。

##Using timing functions within keyframes
## Using timing functions within keyframes

值得注意的是,当您为动画指定计时功能时,计时功能适用于动画的*每个关键帧*

Expand All @@ -89,6 +89,6 @@

在这种情况下,动画的前半部分将是线性的,而后半部分将使用`ease-out`计时功能。

##Homework
## Homework

我创建了一个简单的关键帧动画[ here on CodePen]http://codepen.io/donovanh/pen/MYMJRd?editors=010。这些属性列在CSS中。尝试更改其中一些属性,看看会发生什么。
我创建了一个简单的关键帧动画[here on CodePen](http://codepen.io/donovanh/pen/MYMJRd?editors=010)。这些属性列在CSS中。尝试更改其中一些属性,看看会发生什么。

0 comments on commit 8d1e7bc

Please sign in to comment.