css3 转换过渡及动画

转换transform：

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。您可以使用 2D 或 3D 转换来转换您的元素

2D转换属性：

transform    向元素应用 2D 或 3D 转换
transform-origin    允许你改变被转换元素的位置。

2D Transform 方法：

matrix(n,n,n,n,n,n)    定义 2D 转换，使用六个值的矩阵。
translate(x,y)    定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)    定义 2D 转换，沿着 X 轴移动元素。
translateY(n)    定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)    定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)    定义 2D 缩放转换，改变元素的宽度。
scaleY(n)    定义 2D 缩放转换，改变元素的高度。
rotate(angle)    定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)    定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)    定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)    定义 2D 倾斜转换，沿着 Y 轴。

3D转换属性：

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

3D Transform 方法：

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 转换元素的透视视图。

过渡transition:

当元素从一种样式变换为另一种样式时为元素添加效果。

过渡属性：

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

css3动画：

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

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

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

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

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

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称
规定动画的时长

动画实例：

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;    /* Firefox */
-webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
-o-animation: myfirst 5s;    /* Opera */
}

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

总结：过渡是可以通过转换和动画来实现的

h5Canvas

css3 转换 过渡 及动画

css3 转换过渡及动画