css3过渡,变换,动画
一、 css3过渡
- CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候
- 下表列出了所有的过渡属性:
|属性 | 描述|
--- | --- |
| transition | 简写属性，用于在一个属性中设置四个过渡属性。|
| transition-property | 规定应用过渡的 CSS 属性的名称。|
| transition-duration | 定义过渡效果花费的时间。默认是 0。|
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。|
| transition-delay | 规定过渡效果何时开始。默认是 0。|
各属性值
transition-property: none|all| property;
| 值 | 描述 |
|---|---|
| none | 没有属性会获得过渡效果。 |
| all | 所有属性都将获得过渡效果。 |
| property | 定义应用过渡效果的 CSS 属性名 |
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
/* 应用于宽度属性的过渡效果，时长为 2 秒 */
div{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
/* 多项改变 */
/* 要添加多个样式的变换效果，添加的属性由逗号分隔： */
div{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
/* 规定当鼠标指针悬浮(:hover)于 <div>元素上时 触发效果 */
div:hover{
width:300px;
}
/* 全部设置所有属性 */
div{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}
/* 但是使用了简写的 transition 属性： */
div { transition: width 1s linear 2s;}
二、动画 CSS3 @keyframes 规则
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
@keyframes myani
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
/* 绑定动画到 这个 div上 完成动画的一个周期是5秒 */
div {
animation: myani 5s;
}
默认值：animation: none 0 ease 0 1 normal
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画。 |
| animation | 所有动画属性的简写属性。 |
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-delay | 规定动画何时开始。默认是 0。 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 |
animation-timing-function 指定动画将如何完成一个周期。
| animation-timing-function 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| steps(int,start|end) | 指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：start：表示直接开始。end：默认值，表示戛然而止。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，
在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。
| animation-fill-mode 属性值 | 描述 |
|---|---|
| none | 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 |
| forwards | 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。 |
| backwards | 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" |
| both | 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。 |
| initial | 设置该属性为它的默认值。请参阅 initial。 |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
三、2D转换
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。
2D变换方法：
translate()
rotate()
scale()
skew()
matrix();
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
div{transform:translate(50px,100px)}
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
div{transform:rotate(30deg)}
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
div{transform:scale(2,3)}
scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
skew() 方法
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
div{transform:skew(10deg,10deg)}
matrix() 方法
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
div{transform:matrix(0.866,0.5,-0.5,0.866,0,0}
| 属性 | 描述 |
|---|---|
| transform | 适用于2D或3D转换的元素 |
| transform-origin | 允许您更改转化元素位置 |
2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴
可能的值：
left
center
right
length
%
| 函数 | 描述 |
|---|---|
| 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转换
rotateX() 方法
rotateX()方法，围绕其在一个给定度数X轴旋转的元素
rotateY() 方法
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
转换属性
|属性 | 描述
|---|---
|transform | 向元素应用 2D 或 3D 转换
|transform-origin | 允许你改变被转换元素的位置
|transform-style | 规定被嵌套元素如何在 3D 空间中显示 值 flat(2d)或preserve-3d(3d)
|perspective | 规定 3D 元素的透视效果
|perspective-origin | 规定 3D 元素的底部位置
|backface-visibility | 定义元素在不面对屏幕时是否可见。
3D 转换方法
|函数| 描述
|---|---
|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 转换元素的透视视图
