《
译文：CSS transitions#CSS3变换入门》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234W42013.htm
OK，实在CSS 变换就这么简单，它并不难理解，而且你也不必些大批的JS脚本来实现它，这很便利适用，多做几回训练，你就可以纯熟的使用它了。
一些读者认为的那些技术将会有75%的用户看不到的观点是不靠谱的。
1 2 3 4 5
a:link, a:visited { color: blue; -webkit-transition: color .25s linear .1s; transition: color .25s linear .1s; } 添加多重变换
因为一个变换就是一个CSS属性，如果你在同一个CSS规矩中添加多个变换的实例，那么最后的那个将会笼罩前面的，而不是添加它们。所以在下面的规则中，唯一的变换将是背景色彩：
荣幸的是，关于动态样式的争论已经成为从前。去年三月份，来自Apple和Mozilla的代表们开始将CSS变换模块添加到CSS 3特征里面，无比濒临Apple已经添加到webkit中的表示。
但是W3C CSS工作组曾经谢绝将变换添加到它的官方特性里面，一些成员保持认为变换并非CSS属性而通过脚本来处置会更好 但是良多设计师和开发职员，包括我自己，坚持以为这确切是样式——只是动态样式，而不是我们日常使用的传统的静态样式。
让我们假设一个简单的变换，在用户的鼠标经过一个链接的时候，将颜色从一个变换成另外一个。与其它CSS属性一样，变换也是直接添加到要使用它的挑选器中。该属性可以采取下面的4个值。
Delay
1 2 3 4 5 6 7 8 9 10
*:link, *:visited, *:hover, *:active, *:focus { -webkit-transition: color .25s linear, background-color .25s linear, border-color .25s linear; transition: color .25s linear, background-color .25s linear, border-color .25s linear; }
一个反对全体变换，同时明白反对使用全体取舍器作为CSS reset的争辩是，将一个样式用到页面的所有元素会减缓页面的渲染。然而，我并没有发明任何有关与此的证据。有人晓得吗？
在我们持续之前，让我强调一点：永远不要让网站的功能依附样式，如果该样式不是浏览器通用的话(也就是说，所有的常用浏览器都支持)。
对那些读者我想说，“坐稳了”，由于我将要向你介绍另一个新的CSS属性，它容许你通过简单的几行代码来为任意元素添加很酷的变换效果。
变换持续的时间，通常以秒来计算(比如, .25s).
纯CSS菜单比较轻易实现，而变换还可以让你给菜单添加下拉和高亮效果。
CSS属性 改变的对象 background-color 色彩 background-image 只是渐变 background-position 百分比，长度 border-bottom-color 色彩 border-bottom-width 长度 border-color 色彩 border-left-color 色彩 border-left-width 长度 border-right-color 色彩 border-right-width 长度 border-spacing 长度 border-top-color 色彩 border-top-width 长度 border-width 长度 bottom 百分比，长度 color 色彩 crop 百分比 font-size 百分比，长度 font-weight 数字 grid-* 数目 height 百分比，长度 left 百分比，长度 letter-spacing 长度 line-height 百分比，长度，数字 margin-bottom 长度 margin-left 长度 margin-right 长度 margin-top 长度 max-height 百分比，长度 max-width 百分比，长度 min-height 百分比，长度 min-width 百分比，长度 opacity 数字 outline-color 色彩 outline-offset 整数 outline-width 长度 padding-bottom 长度 padding-left 长度 padding-right 长度 padding-top 长度 right 百分比，长度 text-indent 百分比，长度 text-shadow 暗影 top 百分比，长度 vertical-align 百分比，长度，要害词 visibility 可见性 width 百分比，长度 word-spacing 百分比，长度 z-index 正整数 zoom 数字 变换计时与延迟
然而请稍等一下。在深刻懂得变换之前，咱们须要懂得一个元素能变换的不同的状况。
因为变换属性始于Webkit扩展，我们不得不同时使用transition 和-webkit-transition 属性以向后兼容。
多少个月之前，我就提议设计师应该开端使用新的CSS 3 技巧来实现一些它们渴求已久的基础的功能了——独一的问题就是，这些技术不一个能在IE中可用，包括IE8。
被变换的属性(比如, color)。看一下下面的表格了解所有可以被变换的CSS属性列表。
Timing function
你可以在页面上的两点之间挪动一个对象，而后使用变换给它添加动画效果。
Duration
对于设计加强的一个扼要先容
变换曾经只是Webkit的一局部，而且是Safari UI能做而其它浏览器不能实现的一些很酷的东东的基本。
你需要到下载Apple Safari 3+ 或Google Chrome浏览器来查看这些变换效果。这两个浏览器都支持Mac和PC体系。
CSS变换从哪里来？
名称 如何工作 cubic-bezier(x1, y1,
评估一个网站项目可行性的六势, x2, y2) X 和 Y 值在0到1之间，以定义用于Time function的贝塞尔曲线的外形。 linear 均速 ease 逐渐慢下来 ease-in 加速(渐入) ease-out 减速(淡出) ease-in-out 加速然后减速 全部变换？
是的，你能够使用DHTML、jQuery或者本人编写JS来实现适度，但是这需要更多的代码来实现本应当十分简略的功效。
比如一个链接要么是这个颜色，要么是那个颜色；一个文本区域要么这么大，要么那么大；一张图片要么是透明的要么是不透明的；它们是从一个状态直接变到另一个状态&mdash,访客跳出网站的原因以及解决办法;—中间并没有过渡。
当然，我们也盼望变换回到默认的链接颜色，那么我们可以添加一个变换到:link (以及:visited)伪类上,设计的意义：交互的体验界面，并在它褪去之前添加一个简单的延迟(非常之一秒) :
状态定义当前页面中相应的元素如何与用户进行交互，它们在CSS中通过伪类来定义，好比当用户的鼠标经过一个元素的时候，那个元素就会被hover伪类把持。
转动效果
简直所有的有色彩、大小或地位等组件的CSS属性，包括很多新添加的CSS 3属性， 都可以利用变换。一个值得留神的例外是box-shadow。
Tag：CSS3入门 CSS CSS3入门 CSS ,
设计理论经典之浅谈构图学;
CSS 变换刚在CSS 3中被引入，但是已经被增加为webkit的扩大了。也就是说，现在它们只能用于基于webkit内核的阅读器，包含Apple Safari跟Google Chrome。不外从Opera 10.5 pre-Alpha版原来看，Opera将在下一个10.5中支撑CSS 3变换。所以要看到本文中提到的实际后果，强烈倡议你应用Chrome或者Safari 4来查看本文。
1 2 3 4 5 6 7 8
a:hover { color: red; background-color: rgb(235,235,185); -webkit-transition: color .25s linear; transition: color .25s linear; -webkit-transition: background-color .15s linear .1; transition: background-color .15s linear .1; }
当然，这并不是说，不能增添多重变换——多重变换可以在统一个变换属性定义顶用逗号隔开：
让我们首先提阿贾这这些属性到:hover 伪类中:
--> [
网站建设之]译文：CSS transitions#CSS3变换入门
1 2 3 4 5
a:hover { color: red; -webkit-transition: color .25s linear; transition: color .25s linear; }
那么当初，当鼠标经由一个链接，不会直接从蓝色跳转到红色，而是用四分之一秒的时间逐渐变换它们的中间颜色(过渡颜色)。
CSS变换将不会替换所有的DHTML，不过它会供给一些支持过渡的方式来进步你在浏览器中的设计。
变换、状态与动作
只管人们冀望在屏幕上有些改变，但是CSS和HTML对页面中的交互能做的切实太少了，而那些还需要用代码来实现。
一个简单的变换
变换最常见的用法就是当用户的鼠标悬放到元素上的时候将元素高亮(无论是链接、表格、表单仍是其它的什么元素)，变换是为页面添加平滑的界面的异常棒的办法。
什么可以被变换？
来自W3C的变换的阐明，这里是一个可以赋予变换的CSS属性的列表，附带改变的对象，我也高亮了一些比较有用的属性。
这也就是说，你可以使用样式，比如变换，作为设计增强以提高用户体验——在不就义看不到它们的用户的可用性的条件下。如果你不用CSS变换照样能用而且用户仍然可能实现他们的义务，就没问题，你就可以使用CSS变换。
使用变换，你可以改变变换的速率，在开始的时候较慢然后在停止的时候加速，反之亦然，或者之间的任何事件。CSS变换有5个计时的症结词，同时也允许你自己定义你自己的计时曲线。
下拉菜单
对错过的同窗再一次强调：永远不要让网站的功能依赖样式，如果该样式不是浏览器通用的话。
变换将很快成为所有网站的尺度操作方法，从而增强用户界面的休会。
1 2 3 4 5 6
a:hover { color: red; background-color: rgb(235,235,185); -webkit-transition: color .25s linear, background-color .15s linear .1s; transition: color .25s linear, background-color .15s linear .1s; }
这条定义将发生色彩和背风景的双重变换。
这导致大部门网页有些僵硬，因为元素只会很呆板的切换或改变。
变换通过转变不同元素状态之间的一个时光段内的款式来起作用。比方，一个元素的默认状态的色彩值将会在浮现hover状态的颜色值之前逐步显示色盘中的旁边颜色。
答应你节制连续的时间的计算方式。与其使用一个简单的线性盘算，你可以使变换加速(渐入)或者减速(淡出)，或者甚至specify a beat or count (比如，linear). More on this later in the article.
译注：本文原文标题为 CSS transitions 101，101这个数字比拟不好理解，其实美国大学第一门课程通常编号为101，所以101个别表示入门、低级的意思。另外关于 transition 这个词的翻译，我之前是翻译成“转换”，但是这个翻译很别扭，在和多人探讨后，感到翻译成“变换”更适合一些，多谢各位。
动态伪类 起作用的元素 描写 :link 只有链接 未拜访的链接 :visited 只有链接 访问过的链接 :hover 所有元素 鼠标经过元素 :active 所有元素 鼠标点击元素 :focus 所有可被选中的元素 元素被选中 None 所有元素 所有元素的默认状态
在动作和变换开始之间等候多久，通常用秒来表现(比如,设计理论之Rich设计模式, .1s)。假如你不想延迟，该值可省略。
动画
为了给你的全部网站添加一个广泛的变换，一个做法就是添加一个变换到全部抉择器，相似CSS reset。下面的代码会给页面中的所有元素添加一个默认的变换，从而许可你坚持一个同一的变换效果：
我们需要的是疾速而简单的方法来给页面添加简单的变换(transition)效果。在本文中，你会发现很有用的关于CSS变换(transition)以及如何使用它们的信息。
首先，一些变换的主意
CSS property
(责任编辑：网站建设)
译文：CSS transitions#CSS3变换入门相关文章