规定你希望把效果添加到哪个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;
}
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);
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>
13 CSS3过渡属性、CSS3的transform 属性、CSS3动画属性、动画库
原文：https://www.cnblogs.com/xue666888/p/14255308.html