diff --git a/Makefile b/Makefile index 1fed338..f88b2e3 100644 --- a/Makefile +++ b/Makefile @@ -48,4 +48,4 @@ $(DOCS)/$(DOCS_FILENAME).html: $(CHAPTERS) mkdir -p $(DOCS) pandoc $(ARGS) --standalone --to=html5 -o $@ $^ cp -R $(IMAGES_FOLDER)/ $(DOCS)/$(IMAGES_FOLDER)/ - cp $(CSS_FILE) $(DOCS)/$(CSS_FILE) + cp $(CSS_FILE) $(DOCS)/$(CSS_FILE) diff --git a/build/html/book.html b/build/html/book.html index cce41a7..a3f358a 100644 --- a/build/html/book.html +++ b/build/html/book.html @@ -141,7 +141,7 @@
  • Let’s recap
  • Homework
    • -
  • 动作中的动画
    • +
  • Creative environments
    • +
  • Transitions
  • Animations
  • Transitions in action
    • +
  • Timing functions
    • +
  • Multiple transitions
    • +
  • Animations in action
    • +
  • Animation properties
    • +
  • Keyframes in action
    • +
  • Animation recap
    • +
  • Star Wars
    • +
  • Revealing content on scroll
    • +
  • Accessibility -

    下一篇: 我们将学习 transitions! # Transitions

    +

    下一篇: 我们将学习 transitions！

    +

    Transitions

    我们来看下 transition 这个属性。

    以前的浏览器功能比较简单，那时候无法显示图片，也只能处理一部分字体的渲染。后来出现了 CSS ，它的出现给网页带来了无限的可能。

    在浏览器上进行动画制作也不是什么新鲜事了，Flash，Canvas 还有 JavaScript 都可以进行制作动画。现在我们又有了新选择：CSS。

    -

    Transitions

    +

    Transitions

    使用 CSS 制作动画的一种方式就是使用 transition 属性。啥是 transition ? transition 指从一个“状态”到另一个“状态”的动画模拟。

    Transitions: A to B
    Transitions: A to B
    @@ -384,7 +409,7 @@

    Homework

    如果你已经下载 HTML 和 CSS 的脚手架，找到 animation 看一下，与 transition 不同，animation 还需要第二部分，称之为 keyframe。试着改变其中的一些值，看看会产生什么效果。

    Transitions in action

    前面我们介绍了 transition 和 animation 这两个属性，这一节我们来看看具体的代码。

    -

    Transitions

    +

    Transitions

    在浏览器中，一个元素从一个状态转变成另一个状态，我们称发生了过渡(transition)。浏览器负责来渲染状态变化过程中的每一帧从而创建一个动画效果。

    transition 是 CSS 中的属性，就像给元素设置 height、width、border 一样，我们也可以给元素设置 transition。

    那 transition 怎么用呢？来看下面代码：

    @@ -461,7 +486,8 @@

    Things transitions don’t wor Source: https://cssanimation.rocks/pseudo-elements/
    Source: https://cssanimation.rocks/pseudo-elements/

    Homework

    -

    我创建了一个简单的 transtion 效果（Codepen），你可以尝试修改不同的属性来创造不同的效果。 # Timing functions

    +

    我创建了一个简单的 transtion 效果（Codepen），你可以尝试修改不同的属性来创造不同的效果。

    +

    Timing functions

    时间函数(timing function)是用来描述过渡过程中，属性值变化速度的。如果过渡过程中属性值一直以一个固定的速度变化，那就会显得千篇一律，不那么生动。有了时间函数（timing function）的加持，我们可以制作更加生动有趣的效果。

    举个例子：

    第一个例子，我们使用 linear：

    @@ -525,13 +551,14 @@

    More examples

    有关 timing function 的更多问题，我已经在medium上写了一篇文章可供参考。

    Homework

    尝试修改上节的例子，修改 transition-timing-function 属性来查看不同值的不同效果。

    -

    这里还有一个例子，虽然这个例子使用的是animation，但它里面timing function的使用是跟transition一样的。 # Multiple transitions

    +

    这里还有一个例子，虽然这个例子使用的是 animation，但它里面 timing function 的使用是跟 transition 一样的。

    +

    Multiple transitions

    到目前为止，我们都是一次在元素上使用 transition 修改一个属性值，接下来我们将看一些复杂的例子：如何使用一个 transition 来修改很多属性，如何使用多个 transition 来创造更好的效果。【Tips:使用多个 transition 并不是像下面那样写多个 transition。要在一个元素上使用多种过渡，可以在一个 transtion 里写，具体看本节末尾处的说明】

    Example 1: Fancy button

    -

    前面我们提到的 button 的例子比较简单，这里我们来看个复杂的例子。

    +

    前面我们提到的 button 的例子比较简单，这里我们来看个复杂的例子。

    Source: http://codepen.io/donovanh/pen/YPMGpJ
    Source: http://codepen.io/donovanh/pen/YPMGpJ
    @@ -577,7 +604,7 @@

    Multiple transitions on a sing

    比如有一个元素，我们希望它的背景和边框有不同的过渡效果，显然对所有的属性写一条单一的 transition 不能满足我们的需求。【Tips：比如希望背景的过渡持续时间和时间函数跟边框的不一样，那么 transition: all 1s linear 这样子显然是无法满足需求的。】

    我们可以在一条 transition 语句里设置多个属性，语句间用 , 分开。

    -

    上面的 transition 应用到某个元素上后，元素的 background 会和 border 采用不同的过渡效果。background 过渡持续时间1s，时间函数ease-out，border 的过渡持续时间0.5s，时间函数是 linear。

    +

    上面的 transition 应用到某个元素上后，元素的 background 会和 border 采用不同的过渡效果。background 过渡持续时间1s，时间函数 ease-out，border 的过渡持续时间0.5s，时间函数是 linear。

    Transitions and JavaScript

    到目前为止，前面我们举过的例子，都是使用 CSS 中的 transition 在鼠标悬停时和不悬停时添加过渡效果。

    这些效果都需要被动地触发，就是要鼠标悬停在元素上或者从元素上移开。当然这不是触发这些效果的唯一方式，我们还可以使用 JavaScript 代码来触发这些效果。

    @@ -617,7 +644,8 @@

    Let’s recap

    下一章我们将讨论 animation 这个话题。

    Homework

    Before we start looking at the animation property, take some time to think about how you use transitions.

    -

    Can you think of ways they could help smooth the interactions or state changes on your pages? How might they add appeal? # Animations in action

    +

    Can you think of ways they could help smooth the interactions or state changes on your pages? How might they add appeal?

    +

    Animations in action

    前面我们讲了 transition 属性，现在让我们来学习下 animation 属性

    A symbiotic relationship

    @@ -677,7 +705,8 @@

    Prefixes

    在 CodePen 中，你可以使用 CSS 设置中的 “Autoprefixer” 选项。对于本地开发，我使用 Gulp 版本的 Autoprefixer。 Prefix Free也是一个不错的选择。

    Homework

    Open up this keyframes example and try changing the code. See if you can break it, and fix it. Even better, if you come up with something cool, let me know!

    -

    I love seeing how you’re getting on. You can email me or get in touch on Twitter. # Animation properties

    +

    I love seeing how you’re getting on. You can email me or get in touch on Twitter.

    +

    Animation properties

    在我们看更多的例子之前，先来了解下 animation 的各个属性。

    与 transition 一样，animation 可以使用简写形式，也可以分开单独指定属性值。

    animation-delay

    @@ -737,7 +766,8 @@

    Using timing functions within k }

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

    Homework

    -

    这里有一个例子。尝试更改其中一些属性，看看会发生什么。 # Keyframes in action

    +

    这里有一个例子。尝试更改其中一些属性，看看会发生什么。

    +

    Keyframes in action

    前面章节我们学习了 animation 属性，并且初步了解了 keyframes。这一节我们来深入学习下 keyframes。

    Things to look out for

    下面是一个简写方式，只有两个状态，初始状态和终止状态，与 0% 和 100% 的写法是等价的。

    @@ -866,7 +896,8 @@

    Traffic lights

    Further reading

    想了解更多，欢迎阅读 CSS tricks article on the subject

    Homework

    -

    例子中的交通灯是按照 UK 的规则来的，你可以尝试修改参数，将其改成其他规则的，看看效果怎么样。 # Animation recap

    +

    例子中的交通灯是按照 UK 的规则来的，你可以尝试修改参数，将其改成其他规则的，看看效果怎么样。

    +

    Animation recap

    目前为止，我们已经讨论了很多细节，我希望这对你们是有帮助的。

    当我学习这个的时候，我必须承认我花了一些时间来深入了解动画和关键帧。如果到现在你还不是特别了解，不要灰心沮丧。坚持下去，你将会逐渐掌握使用动画的技巧。

    在本章中，我们将花一点时间来回顾一下之前学习过的内容。首先，让我们来看看作业挑战！

    @@ -970,7 +1001,7 @@

    Part 2: Adding the hover transition< }

    上述代码表示当光标悬停在动画上时，它将暂停。当光标再次移开时，它将恢复其默认的 playing 状态。

    您也可以使用 JavaScript 实现此目的。一种可能性是当用户与页面的另一部分交互时，或者当它们滚动时，让一些 JavaScript 禁用动画。我们将看一下如何在以后滚动时启用动画。

    -

    Adding a message

    +

    Adding a message

    当用户将鼠标悬停在元素上时，我们可以使用 transition 来显示消息。要做到这一点，我们需要更多的 HTML：

    <div class="screen">
   <div class="message">Hover message!</div>
@@ -994,7 +1025,8 @@ 
    Summary
    
 
    Homework
    
 
    花一点时间思考我们到目前为止所涵盖的内容。
    
 
    我们讲述了很多。结合 animation 和 transition 是将页面变为现实的有效方式。
    
-
    在考虑如何将其应用于您的工作时，请考虑如何控制它。什么时候动画可以为您的用户带来好处，什么时候可以起作用呢？很高兴知道如何制作动画，但更好的是知道什么时候不使用动画。 # Star Wars
    
+
    在考虑如何将其应用于您的工作时，请考虑如何控制它。什么时候动画可以为您的用户带来好处，什么时候可以起作用呢？很高兴知道如何制作动画，但更好的是知道什么时候不使用动画。
    
+
    Star Wars
    
 
    可乐爆米花准备好了么！在这章中我们要做一个有意思的 SVG 动画。我们将在 “The Force Awakens”（《星球大战7:原力觉醒》）电影预告片中制作 “Star Wars” 的片名。。
    
 
    
 Source: https://www.youtube.com/watch?v=ngElkyQ6Rhs
    Source: https://www.youtube.com/watch?v=ngElkyQ6Rhs
    
@@ -1087,7 +1119,8 @@ 
    The Force Awakens
    
 
    
 
    Homework
    
 
    如果你有时间我会鼓励你看一下 CodePen version。
    
-
    你可能会注意到 CSS 中的一些 “media” 查询。我们使用 “media” 来调整适应较小的设备。尝试更改一些动画关键帧，或 transform 值来查看会发生什么。 # Revealing content on scroll
    
+
    你可能会注意到 CSS 中的一些 “media” 查询。我们使用 “media” 来调整适应较小的设备。尝试更改一些动画关键帧，或 transform 值来查看会发生什么。
    
+
    Revealing content on scroll
    
 
    Web动画的一种常见用途是在浏览器滚动时向元素添加动作。在本章中，我们将了解如何执行此操作。
    
 
    这是 today’s demo on CodePen。尝试向下滚动页面，看看引用文本和猫是如何淡入的。
    
 
    Wow.js
    
@@ -1132,7 +1165,8 @@ 
    Using Modernizr
    
 
    这个 demo 中包含了 Modernizr。
    
 
    Homework
    
 
    让内容逐渐淡出是一个很好的开始，但是您是否可以想象用这种方式来为您的设计和网站增加价值？当用户浏览时，请注意滚动出内容时开始动画的时间。
    
-
    它何时起作用，什么时候又不那么好用？ # Accessibility
    
+
    它何时起作用，什么时候又不那么好用？
    
+
    Accessibility
    
 
    目前为止，我们已经学习了网页动画，以及如何创建它。在结束这门课程之前，我们来花点时间思考一下我们可以做点什么来确保读者正确使用动画。
    
 
    动画可以丰富我们的内容，也可能适得其反。
    
 
    Make sure content is accessible