css3三大动画属性是：1、transition属性，用于设置元素的过渡效果；2、transform属性，用于向元素应用2D或3D转换（旋转、缩放、移动或倾斜）；3、animation属性，需要和“@keyframes”一起使用来创建动画。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
css3动画属性分为：transform、transition、animation
1.transition(过渡)
a:transition-property：检索或设置对象中的参与过渡的属性 b.transition-duration：检索或设置对象过渡的持续时间 c.transition-delay：检索或设置对象延迟过渡的时间 d.transition-timing-function：检索或设置对象中过渡的动画类型 简写： transition: 属性值1 属性值2 属性值3 属性值4 属性值1： 需要参与过渡属性 all ( 能支持过渡属性的都会过渡变换 默认值) 属性值2： 过渡的时间 s秒 ms 毫秒 属性值3： 延迟的时间 s秒 ms 毫秒 属性值4： 动画的类型（匀速、匀加速、匀减速........）
例如：transition:3s 2s linear;
2.transform
2D
a.位移：transform:translate(参数1，参数2)
参数1：在X轴移动的距离
参数2：在Y轴移动的距离
ps:参数如果是正值的情况下：往右往下 负值：往左往上
单独设置X/Y的位移：
transform:translateX(参数);
transform:translateY(参数);
b.缩放：transform:scale(参数1，参数2);
参数1：X轴缩放的比例
参数2：Y轴缩放的比例
ps:参数小于1,缩小；参数大于1，放大。如果两参数相同，写一个就行
单独设置X Y
transform:scaleX();
transform:scaleY();
c.旋转：transform:rotate();
默认情况下围绕中心点转动，转动的是度数，deg!
单独设置围绕某个轴（X Y）
transform:rotateX()
transform:rotateY()
d.倾斜：transform:skew();
单独设置围绕某个轴（X Y）
transform:skewX()
transform:skewY()
补充：如果有两个功能函数：先写位移 再写旋转。单独举例旋转：
立即学习“前端免费学习笔记（深入）”；
当围绕中心点时：
span{
display: block;
width: 300px;
height: 150px;
background: purple;
transform: rotate(30deg);
}
当围绕X轴时：
魔法映像企业网站管理系统
下载
技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作
span{
display: block;
width: 300px;
height: 150px;
background: purple;
transform: rotateX(30deg);
}
可以看到，当围绕X轴旋转时，盒子的上面往里，下面往外。
当围绕Y轴时：
span{
display: block;
width: 300px;
height: 150px;
background: purple;
transform: rotateY(30deg);
}
可以看到，图片的左侧往外，右侧往里。
3D
形成3D空间：transform-style:preserve-3d
a.位移：
transform:translate(x,y,z);
translateX()
translateY()
translateZ(不能是百分比)
b.旋转：
transform:rotate();
rotateX()
rotateY()
rotateZ() //默认情况效果类似
rotate3D(x,y,z,a) [ 0不旋转。1旋转 ]
- x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
- y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
- z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
- a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。3.animation
制定关键帧：
@keyframes 关键帧的名称{
from{}
to{}
或者
0%{
}
50%{
}
100%{
}
}
调用关键帧
animation: 复合属性
animation-name 关键帧的名称
animation-duration 动画的持续的时间
animation-timing-function 动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线 step-start //没有动画中间的过渡效果。每次直接跳到下一帧开始的地方）
animation-delay 动画的延迟
animation-iteration-count 动画运动的次数（默认情况下运动1次） infinite(无限循环)
animation-direction 运动的方向
属性值：
- reverse：反方向运行 （ 让关键帧从后往前执行 ）
- alternate：动画先正常运行再反方向运行，并持续交替运行
- alternate-reverse：动画先反运行再正方向运行，并持续交替运行
animation-play-state
属性值：
paused暂停
running运动
常用的写法：
animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间例：
Document
1
2
3
4
5
6
（学习视频分享：css视频教程）
