13 CSS3过渡属性、CSS3的transform 属性、CSS3动画属性、动画库
CSS3过渡属性
-
规定你希望把效果添加到哪个CSS属性上 规定效果的时长
-
transition-property 规定设置过渡效果的CSS属性的名称。
-
none 没有属性会获得过渡效果。
-
all 所有属性都将获得过渡效果。
-
property 定义应用过渡效果的CSS属性名称列表，列表以逗号分隔。
-
-
transition-duration 规定完成过渡效果需要多少秒或毫秒。
-
time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是0,意
味着不会有效果。
-
-
transition-timing-function规定速度效果的速度曲线。
-
linear 规定以相同速度开始至结束的过渡效果。
-
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。
-
ease-in 规定以慢速开始的过渡效果。
-
ease-out 规定以慢速结束的过渡效果。
-
ease-in-out 规定以慢速开始和结束的过渡效果。
-
-
transition-delay 定义过渡效果从何时开始。
-
time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。
-
-
transition属性简写
-
div {
transition:width 1s linear 2s;
}
-
CSS3的 transform 属性
-
transform属性向元素应用2D或3D转换。该属性允许我们对元素进行位移、旋转、 缩放或倾斜。
-
语法：
-
transform: none|transform-functions:
transform属性的初始值是none。
transform-functions设置变形函数。如translate ()移动元素、rotate ()旋转元素、 scale()缩放元素、skew()倾斜元素等。
-
-
浏览器支持：
-
Internet Explorer 9 要求前缀-ms-版本，Internet Explorer 10、 Firefox 和Opera 支持 transform 属性。Chrome 和 Safari 低版本要求前缀-webkit-版本。目前大部分浏览器都支持transform标准属性。
-
-
2D 转换
-
2D位移
-
通过 translate () 函数能够重新定位元素的坐标。
-
translate (x, y) 水平方向和垂直方向同时移动
-
translateX(x) 仅水平方向移动(X轴移动)
-
translateY(Y) 仅垂直方向移动(Y轴移动)
-
x、y为正数表示X、Y轴正向位移，负数为反向位移。
通过translate()方法，元素从其当前位置移动，根据给定的x坐标和y坐标
-
-
2D旋转
-
通过rotate()函数能够旋转指定的元素对象。
-
rotate(*deg) 参数表示角度值，取值单位是度deg正数表示顺时针旋转，负数表示逆时针旋转。
-
-
2D缩放
-
通过scale()函数能够缩放元素大小。
-
scale (x, y) 水平方向和垂直方向同时缩放
-
scaleX(x) 仅水平方向(X轴)缩放
-
scaleY(Y) 仅垂直方向(Y轴)缩放
-
scale()函数传递不同参数时，缩放动画的效果是不同的。参数为数值，可以是正数、 负数和小数，默认值为1;使用0到1之间的值缩小元素，使用超过1的值放大元素。负数 值则翻转元素，然后再缩放元素。
-
-
2D倾斜
-
通过skew()函数能够让元素倾斜显示。
-
skew(x，y) 水平方向和垂直方向同时倾斜
-
skewX(x) 仅水平方向(X轴)倾斜
-
skewY(Y) 仅垂直方向(Y轴)倾斜
-
-
-
定义变形原点
-
CSS变形原点默认为对象的中心点，如果要改变这个中心点，可以使用transform- origin 属性进行定义。
-
transform-origin: x y;
transform-origin 接受两个参数，参数为一个值时，另一个值默认为center;它们 可以是百分比、em、px等具体值；也可以是left、center、right或者top、center、 bottom等描述性关键字。transform-origin的初始值为50% 50%
-
-
3D 转换
-
3D变形有3d位移、3d缩放、3d旋转。3D的用法和2D差不多，只不过多了个Z轴的 值而己。注意skew扭曲是没有3D的。
-
transform-style 属性
-
规定如何在3D空间中呈现被嵌套的元素。该属性必须与transform属性一同使用。
-
flat 子元素将不保留其3D位置。
-
preserve-3d子元素将保留其3D位置。
-
注意：若同时设了 transform-style: preserve-3d;和overflow: hidden;, 3D 效果 将失效，等价于 transform-style: flat。
-
-
perspective 属性
-
定义3D元素距视图的距离，以像素计算。当元素定义了 perspective属性后，其 子元素会获得透视效果，而不是元素本身。perspective属性只影响3D转换元素。
-
number元素距离视图的距离，以像素计。
-
none 默认值，与0相同，不设置透视。
-
-
-
3D位移
-
在CSS3中，新増translateZ 3D位移函数。功能是让元素在3D空间沿z轴进行位移。
-
translateZ( t ) t指的是z轴的向量位移长度。当其值为负值时，元素在Z轴越移越远，导致元素变小。 反之当值为正值时，其在Z轴越移越近，导致元素变得较大。
-
translate3d(x, y, z)函数，可以同时设置元素在三个轴向的位移大小。
-
-
3D旋转
-
CSS3中定义的3D 旋转的函数有:rotateX、rotateY、rotateZ、rotate3d 等。
-
rotateX(a) a.指的是一个旋转角度值，如果为正值，元素围绕X轴顺时针旋转；反之，如果为负值， 元素围绕X轴逆时针旋转。
-
rotateY(a) a.指的是一个旋转角度值，如果为正值，元素围绕Y轴顺时针旋转；反之，如果为负值， 元素围绕Y轴逆时针旋转。
-
rotateZ(a) a.指的是一个旋转角度值，如果为正值，元素围绕Z轴顺时针旋转；反之，如果为负值， 元素围绕Z轴逆时针旋转。
-
rotate3d(x, y, z, angle)
-
x：是一个0到1之间的数值，主要用来描述元素围绕X轴旋转的矢量值。
-
y：是一个0到1之间的数值，主要用来描述元素围绕Y轴旋转的矢量值。
-
Z：是一个0到1之间的数值，主要用来描述元素围绕Z轴旋转的矢量值。
-
angle： 一个角度值，指定在3D空间旋转角度，正值顺时针旋转，反之元素逆时。
-
-
-
3D缩放
-
scaleZ(z);
-
-
CSS3动画属性
animation
定义动画过程
@keyframes 动画名称{
0% {动画开始
}
100% {动画结束
}
}
-
animation-name 动画名称（自定义）
-
keyframe name 规定需要绑定到选择器的keyframe的名称。
-
none 规定无动画效果（可用于覆盖来自级联的动画）。
-
-
animation-duration 完成动画的时间
-
time 规定完成动画所花费的时间。默认值是0,意味着没有动画效果。
-
-
animation-timing-function 动画完成曲线
-
linear 规定以相同速度开始至结束的过渡效果。
-
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。
-
ease-in 规定以慢速开始的过渡效果。
-
ease-out 规定以慢速结束的过渡效果。
-
ease-in-out 规定以慢速开始和结束的过渡效果。
-
-
animation-delay 延时
-
time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是0。
-
-
animation-iteration-count 动画播放的次数
-
n 定义动画播放次数的数值。
-
infinite 规定动画应该无限次播放。
-
-
animation-direction 是否轮流反向
-
定义是否应该轮流反向播放动画。如果animation-direction值是"alternate", 则动画会在奇数次数（1、3、5等等）正常播放，而在偶数次数（2、4、6等等）向后播放。 注意：如果把动画设置为只播放一次，则该属性没有效果。
-
alternate 轮流反向播放
-
normal 默认正常
-
-
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
-
none 不改变默认行为。
-
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
-
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
-
both 向前和向后填充模式都被应用。
-
-
animation-play-state 属性规定动画正在运行还是暂停。
-
paused 规定动画已暂停。
-
running 规定动画正在播放。
-
-
-
动画库
-
https://daneden.github.io/animate.css/
<div class="animated bounce" id="" ></div> -
-