总结
W3C在线教程：
一、CSS3 过渡：
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 规定您希望把效果添加到哪个 CSS 属性上
- 规定效果的时长
实例
应用于宽度属性的过渡效果，时长为 2 秒：
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。
效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：
实例
规定当鼠标指针悬浮于
div:hover
{
width:300px;
}
注释：当指针移出元素时，它会逐渐变回原来的样式。
一、多项改变
如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：
实例
向宽度、高度和转换添加过渡效果：
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 |
下面的两个例子设置所有过渡属性：
实例
在一个例子中使用所有过渡属性：
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
亲自试一试
实例
与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：
div
{
transition: width 1s linear 2s;/* Firefox 4 */
-moz-transition:width 1s linear 2s;/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;/* Opera */
-o-transition:width 1s linear 2s;
}
二、CSS3 动画
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
实例
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
CSS3 动画
当您在 @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 */
}
亲自试一试
注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。
什么是 CSS3 中的动画？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
实例
当动画为 25% 及 50% 时改变背景色，然后当动画 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 myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
亲自试一试
CSS3 动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：
| 属性 |
描述 |
CSS |
| @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 |
规定对象动画时间之外的状态。 |
3 |
下面的两个例子设置了所有动画属性：
实例
运行名为 myfirst 的动画，其中设置了所有动画属性：
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;
}
亲自试一试
实例
与上面的动画相同，但是使用了简写的动画 animation 属性：
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;
}
CSS3 2D 转换
- CSS3 字体
- CSS3 3D 转换
CSS3 转换
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
它如何工作？
转换是使元素改变形状、尺寸和位置的一种效果。
您可以使用 2D 或 3D 转换来转换您的元素。
浏览器支持
| 属性 |
浏览器支持 |
||||
| transform |
|
|
|
|
|
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 需要前缀 -ms-。
2D 转换
在本章中，您将学到如下 2D 转换方法：
- translate()
- rotate()
- scale()
- skew()
- matrix()
您将在下一章学习 3D 转换。
实例
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
亲自试一试
translate() 方法
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
实例
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
亲自试一试
值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
rotate() 方法
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
实例
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
亲自试一试
值 rotate(30deg) 把元素顺时针旋转 30 度。
scale() 方法
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
实例
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
亲自试一试
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
skew() 方法
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
实例
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
亲自试一试
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
matrix() 方法
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
实例
如何使用 matrix 方法将 div 元素旋转 30 度：
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
亲自试一试
新的转换属性
下面的表格列出了所有的转换属性：
| 属性 |
描述 |
CSS |
| transform |
向元素应用 2D 或 3D 转换。 |
3 |
| transform-origin |
允许你改变被转换元素的位置。 |
3 |
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 轴。 |
CSS3 3D 转换
- CSS3 2D 转换
- CSS3 过渡
3D 转换
CSS3 允许您使用 3D 转换来对元素进行格式化。
在本章中，您将学到其中的一些 3D 转换方法：
- rotateX()
- rotateY()
点击下面的元素，来查看 2D 转换与 3D 转换之间的不同之处：
2D 旋转
3D 旋转
它如何工作？
转换是使元素改变形状、尺寸和位置的一种效果。
您可以使用 2D 或 3D 转换来转换您的元素。
浏览器支持
| 属性 |
浏览器支持 |
||||
| transform |
|
|
|
|
|
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换（它只支持 2D 转换）。
rotateX() 方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
实例
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
亲自试一试
rotateY() 旋转
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
实例
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
亲自试一试
转换属性
下面的表格列出了所有的转换属性：
| 属性 |
描述 |
CSS |
| transform |
向元素应用 2D 或 3D 转换。 |
3 |
| transform-origin |
允许你改变被转换元素的位置。 |
3 |
| transform-style |
规定被嵌套元素如何在 3D 空间中显示。 |
3 |
| perspective |
规定 3D 元素的透视效果。 |
3 |
| perspective-origin |
规定 3D 元素的底部位置。 |
3 |
| backface-visibility |
定义元素在不面对屏幕时是否可见。 |
3 |
2D Transform 方法
| 函数 |
描述 |
| matrix3d(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 转换元素的透视视图。 |
转载于:https://www.cnblogs.com/jrzqdlgdx/p/11004528.html