css3动画简介_CSS3简介

css3动画简介

The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.

以下摘自Alexis Goldstein，Louis Lazaris和Estelle Weyl编写的《现实世界HTML5和CSS3，第二版 》一书。 副本在世界各地的商店中都有出售，或者您可以在此处以电子书形式购买 。

Another separate—but no less important—part of creating web pages is Cascading Style Sheets (CSS). As you probably know, CSS is a style language that describes how HTML markup is presented to the user. CSS3 is the latest version of the CSS specification.

创建网页的另一个独立但同样重要的部分是层叠样式表(Cascading Style Sheets，CSS)。 您可能知道，CSS是一种样式语言，描述了如何向用户显示HTML标记。 CSS3是CSS规范的最新版本。

CSS3 contains just about everything that’s included in CSS2.1, the previous version of the spec. It also adds new features to help developers solve a number of presentation-related problems without resorting to scripting plugins or extra images.

CSS3包含规范的早期版本CSS2.1中包含的几乎所有内容。 它还增加了新功能，以帮助开发人员解决许多与演示相关的问题，而无需借助脚本插件或额外的图像。

New features in CSS3 include support for additional selectors, drop shadows, rounded corners, updated layout features, animation, transparency, and much more.

CSS3中的新功能包括对其他选择器，阴影，圆角，更新的布局功能，动画，透明度等的支持。

CSS3 is distinct from HTML5. In this publication, we’ll be using the term CSS3 to refer to the current level of the CSS specification, with a particular focus on what’s been added since CSS2.1. Thus, CSS3 is separate from HTML5 and its related APIs.

CSS3与HTML5不同。 在本出版物中，我们将使用术语CSS3来指代CSS规范的当前级别，特别着重于CSS2.1之后添加的内容。 因此，CSS3与HTML5及其相关API分开。

One final point should be made here regarding CSS and the current “version 3” label. Although this does seem to imply that there will one day be a “CSS4,” Tab Atkins, a member of the CSS Working Group, has noted that there are no plans for it. Instead, as he explains, the specification has been divided into separate modules, each with its own version number. So you might see something like “CSS Color Module Level 4”—but that does not refer to “CSS4.” No matter what level an individual module is at, it will still technically be under the umbrella of “CSS3,” or better yet, simply “CSS.” For the purposes of this book, we’ll still refer to it as “CSS3,” but just understand that this is likely to be the last version number for the language as a whole.

最后一点是关于CSS和当前的“版本3”标签。 尽管这似乎暗示有一天将有一个“ CSS4”，但是CSS工作组成员Tab Atkins 指出，尚无计划。 相反，正如他解释的那样，该规范已分为多个单独的模块，每个模块都有自己的版本号。 因此，您可能会看到类似“ CSS颜色模块第4级”的内容 ，但这并不涉及“ CSS4”。 无论单个模块处于什么级别，从技术上讲，它仍将在“ CSS3”(或者更好的是“ CSS”)的保护下。 为了本书的目的，我们仍将其称为“ CSS3”，但请理解，这很可能是整个语言的最后一个版本号。

我为什么要关心CSS3？ (Why should I care about CSS3?)

Later in this book, we’ll look in greater detail at many of the new features in CSS. In the meantime, we’ll give you a taste of why CSS3’s new techniques are so exciting to web designers.

在本书的后面，我们将更详细地介绍CSS中的许多新功能。 同时，我们将带您领略CSS3的新技术为何对Web设计人员如此令人兴奋。

Some design techniques find their way into almost every project. Drop shadows, gradients, and rounded corners are three good examples. We see them everywhere. When used appropriately, and in harmony with a site’s overall theme and purpose, these enhancements can make a design flourish. Perhaps you’re thinking: we’ve been creating these design elements using CSS for years now. But have we?

一些设计技术几乎可以应用到每个项目中。 阴影，渐变和圆角是三个很好的例子。 我们到处都能看到它们。 当适当地使用并且与站点的整体主题和目的相协调时，这些增强功能可以使设计蓬勃发展。 也许您在想：多年来，我们一直在使用CSS创建这些设计元素。 但是，我们呢？

In the past, in order to create gradients, shadows, and rounded corners, web designers have had to resort to a number of tricky techniques. Sometimes extra HTML elements were required. In cases where the HTML is kept fairly clean, scripting hacks were required. In the case of gradients, the use of extra images was inevitable. We put up with these workarounds, because there was no other way of accomplishing those designs. CSS3 allows you to include these and other design elements in a forward-thinking manner that leads to so many benefits: cleaner markup, maintainable code, fewer extraneous images, and faster-loading pages.

过去，为了创建渐变，阴影和圆角，Web设计人员不得不诉诸许多棘手的技术。 有时需要额外HTML元素。 如果HTML保持相当干净，则需要编写脚本黑客。 在渐变的情况下，不可避免地要使用额外的图像。 我们忍受了这些变通办法，因为没有其他方法可以完成这些设计。 CSS3允许您以前瞻性的方式包含这些和其他设计元素，从而带来很多好处：标记更清晰，代码可维护，更少的无关图像以及页面加载速度更快。

注意：关于供应商前缀的简短历史记录 (Note: A Short History on Vendor Prefixes)

Ever since experimental features in CSS3 have begun to be introduced, developers have had to use prefixes in their CSS to target those features in various browsers. Browsers add vendor prefixes to features that might still be experimental in the specification (that is, they’re not very far along in the standards process).^[3] For example, at one time it was common to see something like this for a simple CSS transition:

自从开始引入CSS3中的实验性功能以来，开发人员就不得不在CSS中使用前缀来在各种浏览器中定位这些功能。 浏览器将供应商前缀添加到在规范中可能仍处于试验阶段的功能(也就是说，它们在标准流程中相距不远)。 ^[3]例如，一次通过一个简单CSS转换通常会看到类似这样的内容：

a { 
  color: #3381d6; 
  -webkit-transition: color 0.4s ease; 
  -moz-transition: color 0.4s ease; 
  -o-transition: color 0.4s ease; 
  transition: color 0.4s ease;
}

This would seem counterproductive to what was just mentioned, namely that CSS3 makes the code cleaner and easier to maintain. Fortunately, many prefixes are no longer needed. Additionally, we highly recommend that developers use a tool that will add prefixing automatically to your CSS.

这似乎与上面提到的适得其反，即CSS3使代码更整洁，更易于维护。 幸运的是，不再需要许多前缀。 此外，我们强烈建议开发人员使用一种可将前缀自动添加到CSS的工具。

One such tool is called Autoprefixer. Autoprefixer can be included as part of your Grunt workflow to post-process your CSS. With this, you need to include only the standard version of any CSS feature, and Autoprefixer will look through the Can I use… database to determine if any vendor prefixes are needed. It will then build your CSS automatically, with all necessary prefixes. You also have the option to manually process your CSS using an online tool such as pleeease. Whatever the case, in many places in this book we will include vendor prefixes, however be sure to use an online resource for up-to-date information on which features still require prefixes.

一种这样的工具称为Autoprefixer。 Autoprefixer可以包含在Grunt工作流程中，以对CSS进行后处理。 这样，您只需要包括任何CSS功能的标准版本，Autoprefixer就会浏览“ 我可以使用...”数据库来确定是否需要任何供应商前缀。 然后它将自动构建带有所有必要前缀CSS。 您还可以选择使用在线工具(例如pleeease)手动处理CSS 。 无论如何，在本书的许多地方，我们都将包括供应商前缀，但是请确保使用在线资源获取有关仍需要前缀的功能的最新信息。

我们所说的“真实世界”是什么意思？ (What do we mean by “the Real World”?)

In the real world, we create web applications and we update them, fine-tune them, test them for potential performance problems, and continually tweak their design, layout, and content.

在现实世界中，我们创建Web应用程序并对其进行更新，微调，测试它们是否存在潜在的性能问题，并不断调整其设计，布局和内容。

In other words, in the real world, we don’t write code that we have no intention of revisiting. We write code using the most reliable, maintainable, and effective methods available, with every intention of returning to work on that code again to make any necessary improvements or alterations. This is evident not only in websites and web apps that we build and maintain as personal projects, but also in those we create and maintain for our clients.

换句话说，在现实世界中，我们不会编写无意重新访问的代码。 我们使用最可靠，可维护和有效的方法编写代码，并打算再次返回该代码以进行必要的改进或更改。 这不仅在我们作为个人项目构建和维护的网站和Web应用程序中体现出来，而且在我们为客户创建和维护的网站和Web应用程序中也很明显。

We need to continually search out new and better ways to write our code. HTML5 and CSS3 are a big step in that direction.

我们需要不断寻找新的更好的方式来编写代码。 HTML5和CSS3是朝着这个方向迈出的一大步。

---

---

^[3] For more info, see: https://www.sitepoint.com/web-foundations/vendor-specific-properties/

^[3]有关更多信息，请参见： https : //www.sitepoint.com/web-foundations/vendor-specific-properties/

翻译自: https://www.sitepoint.com/introducing-css3/

css3动画简介