diff --git a/chapters/03/02.md b/chapters/03/02.md index 44faa8a..88d4597 100644 --- a/chapters/03/02.md +++ b/chapters/03/02.md @@ -1,6 +1,6 @@ # Animation properties -在我们介绍动画示例之前,先了解一下`animation`的属性。 +在我们看更多的动画示例之前,先了解一下`animation`的属性。 与`transition`属性一样,`animation`可以使用简写属性形式,也可以单独指定这些属性。 @@ -8,27 +8,27 @@ 与`transition-delay`类似,此属性表示在开始之前动画的等待时间。在定义多个动画的情况下特别有用。 -如果在定义循环动画的情况下,delay属性不会应用于每次循环。delay只在元素定义动画的时候生效。 +如果定义的动画是循环的,在这种情况下,delay 属性不会每次循环都有效的,只有在给元素添加上动画效果的时候才有效。(只有第一次循环前会有等待时间,其余的就没有了) -实际上可以给这个属性一个负值,比如`-1s`。表示动画立即开始,就像上一个已经过去一样。 +实际上可以给这个属性一个负值,比如`-1s`。动画会直接从第1s开始执行,就好像这1s时间已经过去了。 ### animation-direction -动画通常从0%开始,以100%结束。`animation-direction`使用`normal`,`reverse`,`alternate`和`alternate-reverse`来控制方向。 +动画通常从 0% 开始,到 100% 结束。`animation-direction` 使用 `normal`,`reverse`,`alternate` 和 `alternate-reverse` 来控制方向。(从开始到结束我们可以看作是一个有向的变化) -“Reverse”是指从100%播放(或循环)到0%,而“alternate”指动画轮流反向播放,即从0%播放到100%并再次返回到0%。 +“Reverse”是指从 100% 播放(或循环)到 0%,而 “alternate” 指动画轮流反向播放,即从 0% 播放到 100% 然后再播放到 0%。 ### animation-duration -动画完成一个周期所需要的时间。类似于`transition-duration”`,以秒或毫秒计,如`1s`、`200ms`。 +动画完成一个周期所需要的时间。类似于`transition-duration`,以秒或毫秒计,如`1s`、`200ms`。 ### animation-fill-mode 默认情况下,动画播放完成元素返回其正常状态。使用`animation-fill-mode`,我们可以定义元素在动画结束或开始前的状态。 -使用`forwards`表示当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。在动画显示之前,`backwards`返回第一个关键帧。 +使用`forwards`表示当动画完成后,元素属性保持最后一个关键帧的值。使用 `backwards`表示动画完成后,元素属性变成第一帧(这个第一帧不是关键帧的第一帧,[CodePen Demo](https://codepen.io/jiangxiaoxin/pen/QzWYwG))的值。【Tips:`animation-fill-mode` 除了这里说的两个之外还有多个可选值。】 -例子:[bouncer animation on Hop.ie](http://hop.ie/)。 使用`forwards`,动画播放一次并在最后一帧结束。 +例子:[bouncer animation on Hop.ie](http://hop.ie/)。 使用`forwards`,动画播放一次并在最后一帧结束。【Tips:这个例子貌似没有啊,我翻遍了也没找到】 ### animation-iteration-count @@ -36,7 +36,7 @@ ### animation-name -`animation-name`指的是与动画相关的`关键帧`。例如,如果`animation-name`设置为“foo”,它将使用一组关键帧,如: +`animation-name`指的是动画使用的`keyframes`的名字。例如,如果`animation-name`设置为“foo”,它将使用一组下面这样的关键帧,如: @keyframes foo { ... @@ -48,33 +48,33 @@ ### animation-timing-function -此属性与transitions中定时函数属性的值相同,但行为略有不同。虽然定时功能(例如`ease-out`)适用于整个transition,但动画的定时功能适用于每个关键帧。 +此属性与transitions中定时函数属性的值相同,但略有不同。在 `transition`里时间函数(例如`ease-out`)是作用于整个transition,但`animation`里是作用于关键帧之间。 这意味着以下关键帧将看到动画快速启动并减速至50%,然后快速开始并在100%之前减速。 @keyframes foo { 0%{ - / *动画开始快速,在50%之前变慢* / + / *动画开始时变化速度很快,然后按照ease-out的时间函数,到50%之前越来越慢* / } 50%{ - / *再次,快速启动并减速至100%* / + / *然后又开始的时候很快,然后慢慢减速至100%的时候* / } 100%{ / * 结束 * / } } -这看起来有些复杂。通常在创建关键帧动画时,我会选择`linear`计时功能,并使用`keyframes`处理动画的节奏。 +这看起来有些复杂。通常在创建关键帧动画时,我会选择`linear`,用使用`keyframes`控制动画的节奏。 -话虽如此,`cubic-bezier`计时功能在与动画一起使用时可以产生一些很好的效果,所以可以尝试一下。 +`cubic-bezier`与动画一起使用可以产生一些很好的效果,大家可以尝试一下。 ## Using timing functions within keyframes -值得注意的是,当您为动画指定计时功能时,计时功能适用于动画的*每个关键帧*。 +值得注意的是,当为动画指定时间函数时,这个函数会应用到动画的*每个关键帧*之间。 -这意味着如果您要指定四个关键帧,则计时功能将适用于每个关键帧。ease-out功能会作用在每个关键帧。 +也就是说如果有四个关键帧,并且使用ease-out,那么在上一帧与下一帧之间,变化速度会越来越慢。 -出于这个原因,我们通常会将动画的计时功能定义为linear,并在每个关键帧的基础上控制速度: +所以我们通常会将动画的计时功能定义为linear,然后在每个关键帧的上控制速度: @keyframes my-animation { 0%{ @@ -91,4 +91,4 @@ ## Homework -我创建了一个简单的关键帧动画[here on CodePen](http://codepen.io/donovanh/pen/MYMJRd?editors=010)。这些属性列在CSS中。尝试更改其中一些属性,看看会发生什么。 \ No newline at end of file +这里有一个[例子](http://codepen.io/donovanh/pen/MYMJRd?editors=010)。尝试更改其中一些属性,看看会发生什么。 \ No newline at end of file