过渡 transition
[tansition 过渡/转变]
transition是 css的属性值在一定的时间内从一个状态渐渐变到另一个状态。
transition需要添加触发条件，比如鼠标点击、鼠标滑入，获取焦点来改变元素css的属性值。
-
transition-property：元素中参与过渡的css属性 [property 属性,特性,财产]
-
transition-duration：元素过渡的持续时间
-
transition-delay：元素 延迟过渡的时间 (何时开始)
-
transition-timing-function：元素中过渡的动画类型(运动曲线) 默认:ease
过渡的动画类型库 http://cubic-bezier.com/
简写:
transition:all 5s 10s; 第一个时间是过渡时间, 全部属性,不写或写all
transition的使用规则
1.transition添加给要改变的元素。(谁要变加给谁)
2.要改变的元素的css属性值必须是具体的数值（像素、百分比）。
3.要改变的元素的css属性，必须有起始值和目标值。
4.transition-property:position或者写position的属性值过渡不支持,直接写all
变形属性：transform
css属性,实现元素的位移,旋转,缩放等
[transform 变型,改变形状]
2D平面
- x轴是水平的，向右为正,向左为负。
- y轴是垂直的，向下为正，向上为负。
2D功能函数 属性的一个属性值;
2D位移 translate() transform属性的属性值;
向右,向下正值; 向左,向上是负值;
translate 将元素向指定的方向移动
-
水平移动：向右移动translate(x,0)和向左移动translate(-x,0)；
-
垂直移动：向上移动translate(0,-y)和向下移动translate(0,y);
-
对角移动：右下角移动translate(x,y)、右上角移动translate(x,-y)、左上角移动translate(-x,-y)和左下角移动translate(-x,y)。
-
X轴移动：transform:translateX() ， Y轴移动transform:translateY();
-
transform:translate(x)一个值只代表X轴。
2D缩放scale() transform属性的属性值;
-
让元素根据中心原点对元素进行缩放。默认的值1(不放大,不缩小)。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。
-
只有一个值时，其第二个值默认与第一个值相等。例如，scale(2)让元素沿X轴和Y轴放大两倍。
-
scaleX()：相当于scale(X,1)。表示元素只在X轴（水平方向）缩放元素.
-
scaleY()：相当于scale(1,Y)。表示元素只在Y轴（纵横方向）缩放元素.
-
transform：scale（一个值）同时代表X轴与Y轴
2D旋转 rotate() transform属性的属性值; 单位deg
- 旋转rotate()函数通过角度参数对元素根据对象原点(默认center center)指定一个2D旋转。
- 角度为正值，元素相对原点中心顺时针旋转；角度为负值，元素相对原点中心逆时针旋转。
- rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转.
- rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转.
- rotate()方法，只能给一个值，不能给两个值，给两个值语法报错。
2D倾斜 skew() transform属性的属性值; 单位deg [skju 倾斜]
- 倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
- 一个参数时：表示水平方向的倾斜角度；
- 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度.
变形原点(只对rotate、scale、skew有效)
- transform-origin(该属性加在触发条件之前)
- transform-origin是变形原点，也就是元素围绕着那个点变形,旋转或倾斜，该属性只有在设置了transform属性的时候起作用；
- 元素默认变形原点就是其中心位置(center center).
- 在没有使用transform-origin改变元素原点位置的情况下，transform进行的rotate,scale,skew等操作都是以元素自己中心位置进行变化的。
-
transform-origin属性要加在:hover之前。
2D转换的综合写法
{transform:translate(X,Y) rotate(valuedeg) scale(X,Y) skew(Xdeg,Ydeg);}
- 属性值之间空格隔开;
- 旋转会改变坐标轴方向;
- 有其他属性值是,应将位移放在最前面;
3D
特点:近大远小,物体后面遮挡住看不见;
2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于3d多出个z轴
Z轴：靠近屏幕的方向是正向(正值)，远离屏幕的方向是反向(负值)
x轴,右边为正值,左边负值;
y轴,下面为正值,上边负值;
z轴,向外为正值,向内负值;
3D
CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；
-
translate3d(tx,ty,tz)
-
ty：代表纵向坐标位移向量的长度；
-
tx：代表横向坐标位移向量的长度；
-
tz：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。
注：translate3d(必须写3个值,没有写0)
-
-
translateZ(t)
-
指的是Z轴的向量位移长度。(向外为正值,向内为负值)
-
3D旋转 单位deg
CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
-
rotateX(a)
-
rotateX()函数指定一个元素围绕X轴旋转; 旋转的角度值,如果值为正值，元素围绕X轴顺时针旋转；反之，如果值为负值，元素围绕X轴逆时针旋转。
-
-
rotateY(a)
-
rotateY()函数指定一个元素围绕Y轴旋转，旋转的角度；如果值为正值，元素围绕Y轴顺时针旋转；反之，如果值为负值，元素围绕Y轴逆时针旋转。
-
-
rotateZ(a)
-
rotateZ()函数和其他两个函数功能一样的，区别在于rotateZ()函数指定一个元素围绕Z轴旋转
-
-
rotate3d(x,y,z,a)(前三个值建议取值0或1) 矢量
-
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
-
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
-
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
-
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
-
3D缩放
-
scaleZ(s)
-
s：指定元素每个点在Z轴的缩放比例。
-
-
scale3d()
-
sx：横向缩放比例；
-
sy：纵向缩放比例；
-
sz：Z轴缩放比例；
-
-
注：scaleZ()和scale3d()函数单独使用时没有任何效果，这两个方法需要写在transform属性值位置 为其它属性值的前边，需要配合其他的变形函数一起使用才会有效果
景深 (透视/视距) perspective
设置元素被查看位置的视图：
perspective 属性定义 3D 元素距视图的距离，以像素为单位。该属性允许改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。
提示: 与 perspective-origin 属性一同使用该属性，可以改变 3D 元素的底部位置
近大远小,程序中实现的方法 perspective ,(物体和眼睛的距离越小，看到的物体越大 ,近大远小的效果越明显）
perspective: 1200px;（通常的数值在900-1200之间,添加给父元素）
子元素要想有透视效果,给父元素添加perspective属性;
perspective-origin (添加在父元素上)
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。观察3d元素的（位置）角度.
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。
注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。
perspective-origin: x-axis y-axis;
perspective-origin：center center;（中心）
perspective-origin：left top; （左上角）
perspective-origin：100% 100%; （右下角）
实现3D场景
transform-style属性(添加在父元素上的)
transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d
flat值为默认值，表示所有子元素在2D平面呈现。
preserve-3d表示所有子元素在3D空间中呈现。
控制子元素是否3D呈现, 属性写到父元素上,控制的是子元素
动画 animation
animation vs transition
-
相同点：都是随着时间改变元素的css属性值。
-
不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性值； 而animation在不需要触发任何事件的情况下也可以随着时间去改变元素css的属性值。
制作动画分两步:
- 定义动画; 用关键帧 @keyframes 动画名{ }
- 调用动画; animation: 动画名;
1.关键帧的定义
@keyframes 动画名{
from{初始状态属性}
to{结束状态属性}
}
或
@keyframes 动画名{
0%{初始状态属性}
50%（中间再可以添加关键帧）
100%{结束状态属性}
}
2.调用动画
-
animation-name
-
设置的动画名称
-
必须与规则@keyframes配合使用， 例如:@keyframes mymove{} animation-name:mymove;
-
-
animation-duration
-
设置动画的持续时间
-
例如：animation-duration:3s; 动画完成使用的时间为3s
-
-
animation-timing-function
-
设置动画的过渡类型
-
属性值
-
linear：线性过渡(匀速)。
-
ease：平滑过渡。
-
ease-in：由慢到快。
-
ease-out：由快到慢。
-
ease-in-out：由慢到快再到慢。
-
step-start:马上跳到动画每一结束桢的状态
-
-
-
animation-delay
-
设置动画延迟的时间(何时开始)
-
例如：animation-delay:0.5s; 动画开始前延迟的时间为0.5s)
-
-
animation-iteration-count
-
设置动画的循环次数
-
属性值
-
animation-iteration-count: infinite | number;
-
infinite,无限循环
-
数值, 循环的次数
-
-
-
animation-direction
-
设置动画在循环中是否反向运动
-
属性值
-
normal,正常方向
-
reverse,反方向运行
-
alternate：动画先正常运行再反方向运行，并持续交替运行
-
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
-
-
-
animation-play-state (简写不包括)
-
设置动画正在运行还是暂停
-
属性值
-
animation-play-state:running | paused;
-
running:运动
-
paused: 暂停
-
通常和:hover配合使用, animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行
-
-
-
animation-fill-mode
-
设置动画在播放之前或之后，其动画效果是否可见。
-
none 不改变默认行为。 forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 both 向前和向后填充模式都被应用。
annimation 简写
1997
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
