css3 动画

时间 2019-11-20

标签 css3 css 动画栏目 CSS 繁體版

原文原文链接

译自：你须要知道的CSS3 动画技术
译自： What You Need To Know About Behavioral CSS
请尊重版权，转载须注明本站连接！

译序：本文译自Smashingmagazine，可是原文讲述的内容有些浅，也不是很完整，前端观察在翻译的前提下，增长了更多的更系统的内容。若有不足之处，欢迎指正补充。

随着网络的发展，浏览器具备更强的渲染更高级代码的能力，咱们正逐步实现跨越全部平台和浏览器的目标。咱们不但能够要花费更少的时间来确保咱们的盒模型在IE6中看起来正常，并且造成了鼓励创新、避免hack、重前端脚本的氛围。php

网络是一个很是好的环境，也是一个有丰富的知识来分享的协做社区。若是咱们想要有圆角，咱们就能够实现它。咱们想要多背景图片，咱们实现了它。咱们想要边框图片，咱们也让它实现了。因此需求不是问题。不然，咱们可能还都仍然在使用table来布局页面并且使用过多的代码呢。咱们都知道，网络无所不能。css

为网络而生

CSS 3的属性好比border-radius、box-shadow和 text-shadow在 webkit(Safari、Chrome等)和Gecko(Firefox)等先进的浏览器中的使用开始出现增加的势头。它们(这些CSS属性)已经为用户建立更轻量的页面和更丰富的体验，并且它们能够优雅的降级。然而，这些只是CSS 3能为咱们作的众多事情中的一小部分。html

在本文中，咱们将走的更远，看一看 变形(transformation)、转换(transition)和动画(animation)等更高级的CSS3技术。咱们将涉及代码自己、浏览器支持以及一些能够正确地展现这些新属性是如何即提高你的设计又加强总体用户体验的例子。前端

CSS 变形(Transformation)

CSS变形是一个W3C草案。但当我第一次坐下来阅读它的所有特性以了解一些东西的时候，它并无让我开窍。这个文档是用技术术语的水平写的，你能够想象的到，可是它关注于变形的图形(好比绘图)元素和矩阵。大一学习微积分以后就没有碰过矩阵了，我必须为本章节作不少好的旧浏览器测试以及猜想和检验。html5

在看完我能找到的每个教程和大量的浏览器测试以后，我总结出一些你们都能从中获益的有用的关于CSS变形的信息。jquery

transform

transform属性实现了一些一样可用于SVG的功能。它可用于内联(inline)元素和块级(block)元素。它容许咱们旋转、缩放和转化元素，只须要一行CSS代码。css3

一些前沿设计的最大诟病就是文字不可选(必需要使用切图的方法实现)。当你熟练使用变形属性来控制文字的时候，这就再也不是一个问题了，由于这是个纯CSS方法，因此元素内的文字会保持可选。这是CSS相对于使用图片(或背景图片)的一个巨大优点。web

一些有趣而有用的变形功能：浏览器

rotate
Rotate(转动)容许你经过传递一个度数值来转动一个对象。
scale
Scale是一个缩放功能，可让任一元素变的更大。它使用正数和负数以及小数。
translate
Translate就是基于X和Y 坐标从新定位元素
skew
顾名思义，skew就是要将对象倾斜，参数是度数
matrix
transform支持矩阵变换，就是基于X和Y 坐标从新定位元素

让咱们更深刻的了解每个功能吧。安全

Rotate

变形属性有不少用法，其中一个就是旋转。旋转就是基于度数转动一个对象并可用于内联元素和块级元素，它能够实现一个确实很酷的效果。

#nav{
 -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 }

请注意在IE8中(非标准模式)它须要你写成“-ms-filter”而不是“filter”。

浏览器支持

浏览器对旋转的支持是使人惊奇的普遍。在上面的CSS片断中，咱们直接写上-webkit-和-moz-前缀而后将#nav元素旋转-90度。

至关简单吧？惟一的问题是对于一个至关重要的设计元素，若是IE不支持，不少设计师就会不情愿使用它。

幸运的是，IE有这方面的滤镜:图形旋转滤镜。它能够有4个旋转值：0, 1, 2,和3。你将不会得到和Webkit和Gecko同样的精密控制，可是至少在必定程度上保持统一(甚至IE6)。

缩放

缩放并不像你想象的那样工做：缩小和放大一个元素。缩放功能同时采用宽和高两个值，这些值能够是正数、负数和小数。

正数值放大一个元素，正如你指望的那样，基于制定的宽度和高度。

负数值并不会缩小元素，而是翻转它(好比，文字被反转)而后相应的缩放它。然而，你可使用小于1的小数(例如.5)来收缩或者缩小一个元素。

#nav {
 /* nav元素的宽和高都会被放大双倍 */
 -webkit-transform: scale(2);
 -moz-transform: scale(2); }
#nav {
 /* nav元素的宽会是双倍，而高度保持不变 */ 
 -webkit-transform: scale(2, 1); 
 -moz-transform: scale(2, 1);
 }
#nav {
 /* nav的宽度将是双倍，而且水平翻转，可是高度保持不变 */ 
 -webkit-transform: scale(-2, 1); 
 -moz-transform: scale(-2, 1); 
 }

浏览器支持

缩放属性目前只有Firefox, Safari 和Chrome支持，可是到目前为止没有一个IE版本支持。缩放一个对象是一个至关有意义的设计选择，可是它能够经过渐进加强来使用:hover，这能够在你的导航上添加一个小小的趣味。

#nav li a:hover{
 /* 这可让你的导航连接在鼠标通过的时候轻微的放大 */ 
 -webkit-transform: scale(1.1); -moz-transform: scale(1.1); 
 }

转化

这个名称“转化(translate)”有点容易误导。它事实上是一种使用X和Y值定位元素的方法。

它看起来很像其它的变形方法，只是给你的网站添加一个额外的层面

#nav{
 /* 这会将nav元素向左移动10像素并向下移动20像素 */
 -moz-transform: translate(10px, 20px);
 -webkit-transform: translate(10px, 20px); 
}

浏览器支持

转化属性目前只被Firefox, Safari 和Chrome支持，并且还要使用浏览器的私有前缀-moz- 和-webkit-。

Skew

Skew也是一个颇有用的transform功能，它能够将一个对象围绕着x和y轴按照必定的角度倾斜。这和rotate的旋转不同，rotate只是旋转，而不会让元素的形状改变。skew会让一个元素的形状改变。skew有两个参数，分别表明x和y轴的倾斜度数。

#nav{
 /* 这会将nav元素向左移动10像素并向下移动20像素 */
 -moz-transform: skew(30deg, -10deg);
 -webkit-transform: skew(30deg, -10deg); 
}

浏览器支持

Skew属性目前只被Firefox, Safari 和Chrome支持，并且还要使用浏览器的私有前缀-moz- 和-webkit-。

Matrix

没错，Matrix就是矩阵，矩阵是高等数学中很是基础的一个东东，而在CSS 3中确实一个至关高级的功能，CSS 3引入matrix函数，能够很是灵活的实现上述的各类效果。它有6个参数(a,b,c,d,e,f)，它事实上是一个3*3矩阵：
| a b e |
| c d f |
| 0 0 1 |
matrix变换是将旧的参数通过该矩阵进行转换后生成新值，好吧，我认可个人那些数学知识在毕业的时候都还给老师了，若是你有兴趣深刻研究，能够看一下这里http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined，这是SVG的一个文档，可是对于matrix变换的原理是一致的。

让咱们来看一个例子吧：

#nav{
 /* nav元素将会像右上角倾斜 */
 -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); 
}

浏览器支持

可喜的是，IE支持matrix滤镜，虽然它不支持大部分CSS3变形功能，可是使用它的这个滤镜，基本也能够实现相同的效果，不过，你要先搞明白矩阵运算再说。webkit和Firefox(3.5+)都支持该功能。

链式变形

变形经常是单独的，可是若是你想用到多种变形，代码也是能够快速整合的，特别是使用私有扩展。幸运的是，咱们有一些内置的缩写：

#nav{
 -moz-transform: translate(10, 25); 
 -webkit-transform: translate(10, 25); 
 -moz-transform: rotate(90deg); 
 -webkit-transform: rotate(90deg); 
 -moz-transform: scale(2, 1); 
 -webkit-transform: scale(2, 1); 
}

这些变形能够被链到一块儿，从而让你的代码更高效:

#nav{
 -moz-transform: translate(10, 25) rotate(90deg) scale(2, 1);
 -webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1); 
 }

这些属性的真正的威力是合并到一块儿。你能够移动、旋转、缩放并控制任何内联元素和块级元素而不使用JavaScript。一旦这些属性的支持变的更加普遍，咱们就能够建立更丰富和更轻量的界面和应用。

transform-origin

transform-origin不是transform的一个子功能，可是和transform关系很是密切。它能够用来指定transform的起点，好比，rotate变形的默认起点是其中间，你能够将起点设置在左上角，或者左下角，这样rotate变形的结果就可能大不相同了。

transform-origin接受两个参数，它们能够是百分比，em，px等具体的值，也能够是left,center,right，或者 top,middle,bottom等描述性参数。几个例子：

.class1{-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
...
}
.class2{-moz-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
...}
.class3{-moz-transform-origin:top left;
-webkit-transform-origin:top left;
...}

浏览器兼容性

该属性目前也只有webkit和firefox支持，并且须要添加各自的私有前缀。

转换(transition)

一个涉及到一个CSS属性的基本的转换就是定义和移动一个元素从它的静止状态(好比，深蓝色背景)到它的hover或者激活状态(好比，浅蓝色背景)。

转换能够和变形同时使用(以及引起事件，好比:hover 或:focus)以建立一些动画。淡出背景色彩，滑动一个元素以及让一个对象旋转均可以经过CSS转换实现。

#nav a{ background-color:red; }
 #nav a:hover, #nav a:focus{
  background-color:blue;
  /* 告诉转换去应用到background-color 属性(看起来像一个CSS 参数，不是吗？ #foreshadowing)*/
  -webkit-transition-property:background-color;
  /* 让它持续两秒钟*/
  -webkit-transition-duration:2s;
}

转换的一些参数

transition-property

指定转换的CSS属性名称，好比，上面的例子中，将转换应用于background-color属性。
transition-duration

定义转换花费的时间（从旧属性换到新属性花费的时间）
transition-timing-function

能够理解为过分效果。指定转换过程当中的中间值。能够用cubic-bezier指定。固然有几个经常使用的内置值：ease | linear | ease-in | ease-out | ease-in-out
transition-delay

这个比较容易理解，就是转换延迟的时间。时间能够为正整数、负整数和零，非零的时候必须设置单位是s(秒)或者ms(毫秒)，为负数的时候，转换的动做会从该时间点开始显示，以前的动做被截断。

注：参数部分为前端观察翻译时添加，原文中没有。

浏览器支持

像变形属性同样酷，可是目前只有WebKit浏览器支持。-moz-transition已经在最近的 nightly-build版本的Firefox 3.7中可用(也就是未来可用)。所以能够安全的假设在webkit上是可行的。你也能够添加-moz-transition到你的CSS中以实现未来的加强。甚至能够添加一个不用私有前缀的属性，以防万一。

Animation

动画是CSS 3真正有用的地方。你能够将咱们在上面讨论的全部的元素与动画属性好比animation-duration、animation-name 和animation-timing-function整合以建立像Flash动画同样的效果——纯CSS。

#rotate {
 margin: 0 auto;
 width: 600px;
 height: 400px; 
 /* Ensures we're in 3-D space */
 -webkit-transform-style: preserve-3d;
 /*Make the whole set of rows use the x-axis spin animationfor a duration of 7 seconds, running infinitely and linearly.*/
 -webkit-animation-name: x-spin;
 -webkit-animation-duration: 7s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear; 
}
 /* 定义要调用的动画 */
@-webkit-keyframes x-spin { 
 0% { -webkit-transform: rotateX(0deg); } 
 50% { -webkit-transform: rotateX(180deg); }
 100% { -webkit-transform: rotateX(360deg); } 
}

这个梦幻的CSS动画代码和在线演示能够在webkit网站看到。该演示能够在任何网站看到，可是动画效果却只能在WebKit的nightly build版本可见。它看起来就像上面的视频中的同样，若是你是在用mac os (雪豹版本)，我认为安装一个webkit以亲眼看看这个效果是很值得的(它真的很酷)。Windows系统用户暂时没法欣赏这个效果。

animation的一些参数

animation的参数和translate有些像，因此若是你理解了translate的参数，这里就不难理解了。

animation-name

动画的名称。
animation-duration

定义动画播放一次须要的时间。默认为0；
animation-timing-function

定义动画播放的方式，参数设置相似transition-timing-function
animation-delay

定义动画开始的时间
animation-iteration-count

定义循环的次数，infinite即为无限次。默认是1。
-webkit-animation-direction

动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。另外一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。

浏览器支持

不幸的是，目前，只有少数浏览器支持CSS动画。2D CSS animations 能够在Safari 4 (Leopard)、Chrome 三、Safari Mobile、 Shira 以及其它Webkit 浏览器中工做。Safari 4 (Snow Leopard)支持3D动画

总结

如今，JavaScript能够在CSS 3完善以前弥补这个差距。遗憾的是，让全部浏览器支持这些很棒的属性可能须要一个很长的过程。不用等待那一天的到来，咱们能够先使用一些严谨的渐进加强以及以来Javascript来加强咱们的网站和应用。这不是件坏事，至少如今看起来是。

看了最近的IE9的公告，若是IE团队添加这些属性中的一些到这个新的版本的浏览器中我不会感到惊讶，他们已经开始考虑整合CSS3了(border-radius)。

web的前景是光明的，特别是由于这些相似动画的高度实验性的属性。尽管不少属性对客户或高级产品工做还不可用，至少他们颇有趣！咱们都期待着有一天，咱们能够支持全部平台，以创建一些真的很棒的轻量级应用。

参考与资源

A Crash Course in Advanced CSS3 Effects
Net Tuts 发布的一个很酷的关于CSS3效果的视频。
Webkit Announces Support for CSS 3D Transforms
CSS3.info 制做的一个使用CSS3动画的demo，目前只支持nightly build 版的WebKit.
Jonathan Snook on CSS Text Rotation
Jonathan Snook 讲述即将到来的CSS3 属性.
DEV Camp CSS3 Tricks
一份来自Dan Kurtz的幻灯演示
W3C Spec on 2-D Transformations
关于2-D 变换的资源.
W3C Spec on 3-D Transformations
一个关于3-D 变换的资源.
W3C Spec on CSS3 Animations
CSS animations的W3C工做草案
Safari CSS参考
MDC:Using CSS transforms
MDC: -moz-transform

关于原做者

Tim Wright是一位网页设计师/开发工程师和博主。他从2004年就成为一名web标准和易用性的倡导者。你能够在CSSKarma.com上找到他写的更多文章，或者follow Tim on Twitter。

----------------------------------------------------------------------------------
转载自：http://www.cnblogs.com/jikey/
----------------------------------------------------------------------------------

css3 动画

为网络而生

CSS 变形(Transformation)

transform

Rotate

浏览器支持

缩放

浏览器支持

转化

浏览器支持

Skew

浏览器支持

Matrix

浏览器支持

链式变形

transform-origin

浏览器兼容性

转换(transition)

转换的一些参数

transition-property

transition-duration

transition-timing-function

transition-delay

浏览器支持

Animation

animation的一些参数

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

-webkit-animation-direction

浏览器支持

总结

参考与资源

关于原做者