css3-transform,动画，transition

transform

http://www.w3school.com.cn/cssref/pr_transform.asp

http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

2D 转换

在本章中，您将学到如下 2D 转换方法：

• translate() 位移 （6px, 6px）  元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
• rotate() 旋转 (6deg) 通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
• scale() 缩放 (2,1) 元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
• skew() 倾斜 (2deg,5deg)    元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
• matrix()  

  matrix() 方法把所有 2D 转换方法组合在一起。

  matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

transform-origin 允许你改变被转换元素的位置。默认值： 50% 50% 0  该属性必须与 transform 属性一同使用

　　transform-origin 属性允许您改变被转换元素的位置。

　　2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

 

下面的表格列出了所有的转换属性：

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3
perspective	规定 3D 元素的透视效果。	3
perspective-origin	规定 3D 元素的底部位置。	3
backface-visibility	定义元素在不面对屏幕时是否可见。	3

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)    定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)    定义 3D 转化。
translateX(x)    定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)    定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)    定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)    定义 3D 缩放转换。
scaleX(x)    定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)    定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)    定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)    定义 3D 旋转。
rotateX(angle)    定义沿 X 轴的 3D 旋转。
rotateY(angle)    定义沿 Y 轴的 3D 旋转。
rotateZ(angle)    定义沿 Z 轴的 3D 旋转。
perspective(n)    定义 3D 转换元素的透视视图。

 

 

动画

http://www.w3school.com.cn/css3/css3_animation.asp

from to 动画

@keyframes 动画名字
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes 动画名字 /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes 动画名字 /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes 动画名字 /* Opera */
{
from {background: red;}
to {background: yellow;}
}

1： 把 "myfirst" 动画捆绑到 div 元素，2： 时长：5 秒：
div
{
animation: 动画名字 5s;
-moz-animation: 动画名字 5s;    /* Firefox */
-webkit-animation: 动画名字 5s;    /* Safari 和 Chrome */
-o-animation: 动画名字 5s;    /* Opera */
}

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}

简写：
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

transition

http://www.w3school.com.cn/css3/css3_transition.asp

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 规定您希望把效果添加到哪个 CSS 属性上
• 规定效果的时长

向宽度、高度和转换添加过渡效果：
div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

下面的表格列出了所有的转换属性：

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

贝塞尔曲线网站：可以用来设置过渡效果曲线

http://cubic-bezier.com/