【转】CSS transitions#CSS3变换入门

　　尽管人们指望在屏幕上有些改变，可是CSS和HTML对页面中的交互能作的实在太少了，而那些还须要用代码来实现。
 
好比一个连接要么是这个颜色，要么是那个颜色；一个文本区域要么这么大，要么那么大；一张图片要么是透明的要么是不透明的；它们是从一个状态直接变到另外一个状态——中间并无过渡。
 　　这致使大部分网页有些生硬，由于元素只会很死板的切换或改变。
　　是的，你可使用DHTML、jQuery或者本身编写JS来实现过分，可是这须要更多的代码来实现本应该很是简单的功能。
　　咱们须要的是快速而简单的方法来给页面添加简单的变换(transition)效果。在本文中，你会发现颇有用的关于CSS变换(transition)以及如何使用它们的信息。
几个月以前，我就建议设计师应该开始使用新的CSS 3 技术来实现一些它们渴求已久的基本的功能了——惟一的问题就是，这些技术没有一个能在IE中可用，包括IE8。
　　一些读者认为的那些技术将会有75%的用户看不到的观点是不靠谱的。
　　对那些读者我想说，“坐稳了”，由于我将要向你介绍另外一个新的CSS属性，它容许你经过简单的几行代码来为任意元素添加很酷的变换效果。
　　CSS 变换刚刚在CSS 3中被引入，可是已经被添加为webkit的扩展了。也就是说，如今它们只能用于基于webkit内核的浏览器，包括Apple Safari和Google Chrome。不过从Opera 10.5 pre-Alpha版原本看，Opera将在下一个10.5中支持CSS 3变换。因此要看到本文中提到的实际效果，强烈建议你使用Chrome或者Safari 4来查看本文。
CSS变换从哪里来？ 　　变换曾经只是Webkit的一部分，并且是Safari UI能作而其它浏览器不能实现的一些很酷的东东的基础。
　　可是W3C CSS工做组曾经拒绝将变换添加到它的官方特性里面，一些成员坚持认为变换并不是CSS属性而经过脚原本处理会更好。(内牛满面啊，我前一段也有相似的观点，也和高温讨论过，我认为CSS动画超出了表现的范围，交互的东西应该有脚原本实现，不事后来在鬼哥的点拨下，才开始有了新的认识——神飞)
　　可是不少设计师和开发人员，包括我本身，坚持认为这确实是样式——只是动态样式，而不是咱们平常使用的传统的静态样式。
　　幸运的是，关于动态样式的争论已经成为过去。去年三月份，来自Apple和Mozilla的表明们开始将CSS变换模块添加到CSS 3特性里面，很是接近Apple已经添加到webkit中的表现。
关于设计加强的一个简要介绍 　　在咱们继续以前，让我强调一点：永远不要让网站的功能依赖样式，若是该样式不是浏览器通用的话(也就是说，全部的经常使用浏览器都支持)。
　　对错过的同窗再一次强调：永远不要让网站的功能依赖样式，若是该样式不是浏览器通用的话。
　　这也就是说，你可使用样式，好比变换，做为设计加强以提升用户体验——在不牺牲看不到它们的用户的可用性的前提下。若是你不用CSS变换照样能用并且用户依然可以完成他们的任务，就没问题，你就可使用CSS变换。
首先，一些变换的想法 　　CSS变换将不会替代全部的DHTML，不过它会提供一些支持过渡的方法来提升您在浏览器中的设计。
　　你须要到下载Apple Safari 3+ 或Google Chrome浏览器来查看这些变换效果。这两个浏览器都支持Mac和PC系统。
滚动效果 　　变换最多见的用法就是当用户的鼠标悬放到元素上的时候将元素高亮(不管是连接、表格、表单仍是其它的什么元素)，变换是为页面添加平滑的界面的很是棒的方法。
下拉菜单 　　纯CSS菜单比较容易实现，而变换还可让你给菜单添加下拉和高亮效果。
动画 　　你能够在页面上的两点之间移动一个对象，而后使用变换给它添加动画效果。
变换、状态与动做 　　可是请稍等一下。在深刻了解变换以前，咱们须要理解一个元素能变换的不一样的状态。
　　状态定义当前页面中相应的元素如何与用户进行交互，它们在CSS中经过伪类来定义，好比当用户的鼠标通过一个元素的时候，那个元素就会被hover伪类控制。
动态伪类 起做用的元素 描述 :link 只有连接 未访问的连接 :visited 只有连接 访问过的连接 :hover 全部元素 鼠标通过元素 :active 全部元素 鼠标点击元素 :focus 全部可被选中的元素 元素被选中 None 全部元素 全部元素的默认状态 　　变换经过改变不一样元素状态之间的一个时间段内的样式来起做用。好比，一个元素的默认状态的颜色值将会在呈现hover状态的色彩值以前逐渐显示色盘中的中间颜色。
一个简单的变换 　　让咱们假设一个简单的变换，在用户的鼠标通过一个连接的时候，将颜色从一个变换成另一个。与其它CSS属性同样，变换也是直接添加到要使用它的选择器中。该属性能够采用下面的4个值。
CSS property 　　被变换的属性(好比, color)。看一下下面的表格了解全部能够被变换的CSS属性列表。
Duration 　　变换持续的时间，一般以秒来计算(好比, .25s).
Timing function 　　容许你控制持续的时间的计算方式。与其使用一个简单的线性计算，你可使变换加速(渐入)或者减速(淡出)，或者甚至specify a beat or count (好比，linear). More on this later in the article.
Delay 　　在动做和变换开始之间等待多久，一般用秒来表示(好比, .1s)。若是你不想延迟，该值可省略。
　　由于变换属性始于Webkit扩展，咱们不得不一样时使用transition 和-webkit-transition 属性以向后兼容。
　　让咱们首先提阿贾这这些属性到:hover 伪类中:

1
2
3
4
5

a:hover {
   color: red;
   -webkit-transition: color .25s linear;
   transition: color .25s linear;
}

　　那么如今，当鼠标通过一个连接，不会直接从蓝色跳转到红色，而是用四分之一秒的时间逐渐变换它们的中间颜色(过渡颜色)。
 
　　固然，咱们也但愿变换回到默认的连接颜色，那么咱们能够添加一个变换到:link (以及:visited)伪类上，并在它褪去以前添加一个简单的延迟(十分之一秒) :

1
2
3
4
5

a:link, a:visited {
   color: blue;
   -webkit-transition: color .25s linear .1s;
   transition: color .25s linear .1s;
}

添加多重变换 　　由于一个变换就是一个CSS属性，若是你在同一个CSS规则中添加多个变换的实例，那么最后的那个将会覆盖前面的，而不是添加它们。因此在下面的规则中，惟一的变换将是背景色彩：

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;
}

　　固然，这并非说，不能添加多重变换——多重变换能够在同一个变换属性定义中用逗号隔开：

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;
 }

　　这条定义将产生色彩和背景色的双重变换。
什么能够被变换？ 　　几乎全部的有色彩、大小或位置等组件的CSS属性，包括许多新添加的CSS 3属性， 均可以应用变换。一个值得注意的例外是box-shadow。
来自W3C的变换的说明，这里是一个能够赋予变换的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 数字 变换计时与延迟 　　使用变换，你能够改变变换的速率，在开始的时候较慢而后在结束的时候加速，反之亦然，或者之间的任何事情。CSS变换有5个计时的关键词，同时也容许你本身定义你本身的计时曲线。
名称 如何工做 cubic-bezier(x1, y1, x2, y2) X 和 Y 值在0到1之间，以定义用于Time function的贝塞尔曲线的形状。 linear 均速 ease 逐渐慢下来 ease-in 加速(渐入) ease-out 减速(淡出) ease-in-out 加速而后减速 所有变换？ 　　变换将很快成为全部网站的标准操做方式，从而加强用户界面的体验。
　　为了给你的整个网站添加一个广泛的变换，一个作法就是添加一个变换到全体选择器，相似CSS reset。下面的代码会给页面中的全部元素添加一个默认的变换，从而容许你保持一个统一的变换效果：

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的争论是，将一个样式用到页面的全部元素会减缓页面的渲染。然而，我并无发现任何有关与此的证据。有人知道吗？
　　OK，其实CSS 变换就这么简单，它并不难理解，并且你也不用些大量的JS脚原本实现它，这很方便实用，多作几回练习，你就能够熟练的使用它了。
　　译注：本文原文题目为 CSS transitions 101，101这个数字比较很差理解，其实美国大学第一门课程一般编号为101，因此101通常表示入门、初级的意思。另外关于 transition 这个词的翻译，我以前是翻译成“转换”，可是这个翻译很别扭，在twitter上和 @gaowhen、@ghostzhang、@ivane、@hiwanz、@cnjoel等人讨论后，以为翻译成“变换”更合适一些，多谢各位。转自：http://www.qianduan.net/css-t...
转载于猿2048:➬《【转】CSS transitions#CSS3变换入门》