thanks kirupa

链接鼠标悬停状态类似于卡片盒子。你可以对它做无穷无尽有趣得事。通过学习本章你可以做一件是当鼠标悬停链接时让某背景色滑入视野。

下面，你将看到我所说的例子：

当你将鼠标悬停到Jerry, George, Kramer, 和Elaine链接上，注意会发生什么。一个绿色的背景色滑入视野，同样当鼠标移开背景色滑出视野。相当棒，不是吗？在接下来的章节中，让我们看看如果在自然语言和CSS中实现它。

Onwards!

Overview of How This Works

首先，在深入实现细节之前，让我们分步用自然语言描述它是如果工作的。露个底吧，简言之，和其它一些CSS背景技巧一样，你看到的效果无非是定位背景颜色 ...

thanks kirupa

我经常提到的非常酷的一个例子就是当你鼠标悬停图片上发生滑动的动画。如果你不清楚我在说什么，鼠标悬停下面例子中的方框上：

每个方框由一个高的图片组成。当你鼠标悬停每个图片上，图片会向下滑动展现出它的另一部分。当鼠标移开时，返回原来的状态。所做的全部这些均是由CSS3的transitions来实现的。

在本教程中，我将告诉你怎样实现这种效果并理解它的工作原理。

How This Effect Works

在深入实现其细节之前，让我们先看一下用简单语言描述它的原理。一会儿你将看，一切是如此简单。

首先，你得有这样一个图片：

这个图片默认展示了两个部分。我们要做的是在最初的时候，只显示图像的上半部分认。鼠标悬停上去后，显示下半部分。

我们实现这个目的的方法是，用一个是该图片高度一半的容器包裹它：

注意，容器可以将图片划分为两个不同的部分。在HTML里，将一个图片放到一个小于它的容器里 ...

thanks kirupa

Transition的故事历经考验和磨难。从被无耻浏览器厂商所忽略而必须添加厂商前缀到目前被普遍接受，该旅程肯定是崎岖不平。尽管transition属性在过去几年有了很大进步，但与它更帅更靓的前辈animation相比，在实现某些东西方面并不容易。

我在CSS3: Animations vs. Transitions教程中完全描述transitions和animations的差异，在这里我将重申一个transition的重要局限。这个限制就是transitions没有一个属性指定让它循环。是的！在今天这个时代，transition被设计成只执行一次。的确是个笑话。

幸运的是，这里有一个方法。在本教程里，我将通过一个小伎俩解决 transitionend event 如何使transitions支持循环。

The Example

为了证实我有点疯狂，下面的例子展示了一个永远循环的transition。鼠标移到圆形上看到transition开始运行...永远不会停止。

注意到圆形从小到大的来回振荡。学完本章，你将能创建类似的动画并理解它的运行原理。

How to Make a Transition Loop

在深入做这件事之前，让我们首先退一步理清我们将要做的是什么 ...

thanks kirupa

在理想的世界里，JavaScript会默默的坐在餐桌的一边。CSS将安静的坐在另一边。HTML会依旧那么尴尬，但我们不会谈论它。无论怎样，在某种程度上，这种情况存在相当一段时间。人们建造的东西很长一段时间的范围内下降这完美的世界。

现在，web编程已经发生改变。JavaScript和CSS不再是小孩子了。不再像《辛普森一家》中的角色了，它们已经在一个世界里长大，JavaScript和CSS各自的职责已经越来越模糊了：

[ the Simpsons family has aged really well over the years (credit: usps) ]

尤其是动画的到来使这种模糊变得更为显明。因为CSS3的animations和transitions的高性能，今天你看到越来越的纯粹使用CSS创建动画。你也能看到使用CSS和JavaScript结合创建动画。

在本教程，我将提到一个很小但又非常重要的使用JavaScript和CSS交叉创建动画。这一点就是你使用JavaScript分析哪些是CSS的可动画属性。你将和我一样兴奋想知道如何做到这一点。

Let's get started.

The Example

啥都没有变得无聊，有个示例变得更有感觉，所以我们看一个我提及的例子。将鼠标移到蓝色图片上：

thanks kirupa

虽然 transition在CSS中着实占据一席之地，但它又与JavaScript有一定水平的协作。在与JavaScript协作时的事件领域展示了它自身。

你已知道transition有三个状态：

起始状态、过渡状态和终止状态。在这里，我将告诉你检测这三个状态的存在。不幸的是，这不可能做到的。你将必须接受这里只有一种状态存在，它是终止状态。这个事件被亲切的称之为transitionend，本章是关于这部分的内容。

Meet the transitionend Event

Transitionend事件原理很简单。该事件在transition一次过渡完成后被触发。让我给出CSS代码如下：

#blueCircle {
    transition: all .5s ease-out;
    opacity: .3;
}
#blueCircle:hover {
    transform: scale(3);
    opacity: 1;
}

CSS代码中，定义了一个transition，它应用在blueCircle 元素上，在半秒内影响到它所有的属性。当你鼠标移到blueCircle 上，设置的 ...

thanks kirupa

当你的CSS animations运行时，它不仅是纯粹的视觉变化。在背后，它们在运行过程的某个关键点触发事件。在本节简短的内容中，你将学习这些事件以及如何在JavaScript中监听它们。

Let's get started.

Meet the Animation Events

当一个animation运行时，三个被触发的相关动画事件为：

• animationstart
• animationend
• animationiteration

根据这些事件的名称可知它们分别表示的含义！animationstart事件在一个animation起始时触发，animationend事件在animation终止时触发，animationiterration事件在除一第一次迭代外的每一次迭代开始触发。

看下示意图，下图表示一个迭代为3次的简单animation：

值得注意的一件事，不是说所有这三个事件都会被触发。唯一一个总是被触发的事件是animationstart。animationiteration事件会在第二次迭代开始时被触发-animation设置的迭代至少大于一次。如果animation只运行一次，animationiteration事件将永不被触发。animationend事件在动画结束时的某个点触发（仅一次）。如果动画迭代次数无限次，这就没有结束...如果没有结束，animationend事件将不会被触发 ...

thanks kirupa

使动画有趣的很大一部分就是让物体在屏幕上四处游走。适当的使用它们，为你的内容添加更多色彩，突显一些UI元素、提供一些动画交互等等。这是相当酷滴。

看下面这个比较疯狂的动画：

也可看一下更加微妙的动画，比如下面例子，当鼠标移到方框上时发生的变化：

在上面的两个例子中，动画效果完成使用CSS完成的。CSS中的Animations和Transitions很容易能让元素从静止状态变成运动状态。尽管是那么容易，这也需要你保证一些东西确保动画平滑的运行。本节内容帮助你如何创建它们 ...

thanks kirupa

当你创建一个animation或transition的动画，动画运行过程中属性发生的变化与在终止状态时发生的变化同等重要。比如，属性值随时间线性变化：

在这个例子里，动画看起来不会加速也不会减速。动画以固定单调的速率移动。你可以通过更多的一些属性风格变化把动画提高一个档次：

在这个例子中，开始时属性值变化的比较快，接近终止时变慢。

上面两个例子中，最终结果是相同的。起始状态，确定一个属性初始值。终止状态，经过指定的时延后，变为终止值。如果只在动画起始和终止状态睁开眼，而在动画运行过程中闭上眼，你看不到两个动画的区别。唯一不同的是，在动画生命过程中不同时间段属性值变化的速率，一个是线性的另一个是非线性的。

动画属性如何从初始值到终止值变化的速率有个名字。这个名字是easing function，该内容将贯穿本章始终。

Onwards!

Making Sense of Easing Functions

在前面小节中，谈到缓动函数时，两种不同颜色图表展示属性如何变化。其中一个颜色的线性缓动函数没做太多的东西。另一个颜色的非线性缓动函数，在你的动画运行后，速率减慢。在本节中，让我们转换下视角，关注于缓动函数而不去关注实际属性值的变化和时延。在该部分里，你将看到一些可爱的图表包括lines, labels ...

thanks kirupa

在CSS中，视觉变化上这里有两种技术竞相你的注意： Animations &Transitions. 在本文中，让我们来了解它们之间的异同点，这样你就能知道在什么时候使用哪一个。

本文大部分内容帮助你熟悉animations和transitions。如果你还没有亲自动手实践它们， Creating a Simple CSS Animation 和Looking at CSS3 Transitions 这两篇教程帮助你开始。

Similarities

宏观上，animations和transitions极其相似。它们都可以实现：

• 指定要监听CSS属性的变化
• 设置缓动函数改变属性从开始到结束值变化的速率。
• 指定animation或transition所需要运行的多长时间
• 以编程方式监听animation和transition规定事件，可以做自己想做的事。
• CSS可视化的属性改变

不过，除了这些，你将看到animations 和 transitions的不同，并将它们的特点展现出来。让我们来更详细的看下各自的特点吧。

Differences

Animations 和 transitions会在以下方面会有不同：当你如何触发它们运行时、它们是否容易循环、定义一个transition是多么复杂、怎么在正确场合的使用它们和与JavaScript友好的结合。来更详细的探讨这些话题吧。

Triggering

正如刚看到的animations和animations最大的一个不同就是你怎样触发它们运行 ...

thanks kirupa

CSS中，当你改变一个属性的值，页面立即发生变化。示例，使元素CSS hover状态时，改变transform属性tranlate3d函数一个不同的参数值。

#box img {
    transform: translate3d(0, -350px, 0);
}
#box img:hover {
    transform: translate3d(0, 0px, 0);
    cursor: pointer;
}

该值是将图片垂直向上平移350像素。看看这个实例，在下面例子中将鼠标悬停到HTML标志上：

thanks kirupa

在HTML中动画实现的三种的方式之一是众所周知CSS animations。CSS animations是非常简单的。你能通过控制动画CSS属性来影响元素。它可以让你做出很酷的事比如元素移动、元素淡入淡出、改变元素颜色。

首先让我们看一个例子，让下面的云彩缓慢的上下飘动：

在本篇中，你将学习所有CSS animations，不仅仅是让云朵移动，还有其它更酷更有用的事情。你将会学习通过animation属性怎样定义一个CSS动画，怎么添加关键帧，以及如果调整各种动画相关的属性，这才是你所想要的。

Onwards!

Creating a Simple Animation

学习动画最简单的的方式，就是亲自动手实验， 然后再学习它的工作机制。那么来创建一个HTML文档，写HTML和CSS代码吧 ...

thanks kirupa

也许你们认为动画是电影和计算机中的近代产物，实际上人类在很久很久以前就开始鼓捣它并作为沟通的方式了：

[ a sequence of pictures from 3000 BC (wikipedia) ]

这些动画方式追溯到古代的洞穴壁画，直到现代的精密的机械，正如你现在看到的电视、电脑和手机。今天，生活中几乎在所有的设备屏幕上单击、摇一摇(tap)或按键就可以让它动起来：

动画已不仅仅是壁画中的事物了，而主要在游戏、intros、卡通，横幅广告领域。 它已经根深蒂固于我们用户体验中，它可让你的应用操作简单；可以使你的内容更加漂亮；可以使你的作品更加生动有趣。谁不希望这样啊？

至此你有足够的背景认识。不用去关心它的历史或被信服动画为什么这么有用。可能你已经认识到动画的重要性。如果你想知道如何来实现这些动画，那么你来对地方了。本篇入门教程以及后面的文章，你将学习html中的动画。短期内，你将成为动画的高手， 或至少在屏幕上完成一个动画。

Onwards!

What Is An Animation?

在我们继续进行之前，确定从哪开始学以及怎样创建动画，退一步讲，就是弄清动画是什么 ...

Animation翻译系列文章

Tutorials, videos, and even a book to help you learn how to create great animations in HTML, CSS, and JavaScript.

The Basics

• Introduction to Animation in HTML （译）
• Dealing with Vendor Prefixes in CSS and JavaScript （墙内云盘分享）

CSS Animations and Transitions

• All About CSS Animations（译）
• All About CSS ...