<meta charset="utf-8">
css3动画
- 过渡：transition
- 2D 转换 transform
- 3D 转换 transform
- 动画：animation
过渡：transition
transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
-
补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
-
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
-
transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
-
transition-duration: 1s; 过渡的持续时间。
-
transition-timing-function: linear; 运动曲线。属性值可以是：
-
linear 线性
-
ease 减速
-
ease-in 加速
-
ease-out 减速
-
ease-in-out 先加速后减速
-
transition-delay: 1s; 过渡延迟。多
上面的四个属性也可以写成综合属性：
transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;
其中，transition-property这个属性是尤其需要注意的，不同的属性值有不同的现象。我们来示范一下。
如果设置 transition-property: width，意思是只让盒子的宽度在变化时进行过渡。效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0 auto;
}
box{
width: 100px;
height: 100px;
background: red;
transition: width 2s ease-in-out /*运动曲线 */ 0s ;
transition-delay: 1s;
}
box:hover{
width: 500px;
}
</style>
<body>
<div id="box">
</div>
</body>
</html>
2D 转换
转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式。
转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。
在 CSS3 当中，通过 transform 转换来实现 2D 转换或者 3D 转换。
- 2D转换包括：缩放、移动、旋转。
2、位移：translate
格式：
transform: translate(水平位移, 垂直位移); transform: translate(-50%, -50%);
参数解释：
- 参数为百分比，相对于自身移动。
- 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
应用：让绝对定位中的盒子在父亲里居中
我们知道，如果想让一个标准流中的盒子在父亲里居中（水平方向看），可以将其设置margin: 0 auto属性。
3、旋转：rotate
格式：
transform: rotate(角度);
transform: rotate(45deg);
参数解释：正值 顺时针；负值：逆时针。
transform 中的 rotate 旋转，但同时还要给盒子设置 transition 过渡。没有过渡效果 会卡
3D 转换
1、旋转：rotateX、rotateY、rotateZ
3D坐标系
旋转的方向：（左手法则）
左手握住旋转轴，竖起拇指指向旋转轴的正方向，正向就是其余手指卷曲的方向。
从上面这句话，我们也能看出：所有的3d旋转，对着正方向去看，都是顺时针旋转。
格式：
transform: rotateX(360deg); //绕 X 轴旋转360度
transform: rotateY(360deg); //绕 Y 轴旋转360度
transform: rotateZ(360deg); //绕 Z 轴旋转360度
2、移动：translateX、translateY、translateZ
格式：
transform: translateX(100px); //沿着 X 轴移动
transform: translateY(360px); //沿着 Y 轴移动
transform: translateZ(360px); //沿着 Z 轴移动
3、透视：perspective
电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出3d 效果，并不是正真的3d。
格式有两种写法：
- 作为一个属性，设置给父元素，作用于所有3D转换的子元素
- 作为 transform 属性的一个值，做用于元素自身。
4、3D呈现（transform-style）
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下：
transform-style: preserve-3d; //让 子盒子 位于三维空间里
transform-style: flat; //让子盒子位于此元素所在的平面内（子盒子被扁平化）
动画
动画是CSS3中具有颠覆性的特征，可通过设置多个节点 来精确控制一个或一组动画，常用来实现复杂的动画效果。
1、定义动画的步骤
（1）通过@keyframes定义动画；
（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
（3）在指定元素里，通过 animation 属性调用动画。
之前,我们在 js 中定义一个函数的时候，是先定义，再调用：
js 定义函数：
function fun(){ 函数体 }
调用：
fun();
同样，我们在 CSS3 中定义动画的时候，也是先定义，再调用：
定义动画：
@keyframes 动画名{
from{ 初始状态 }
to{ 结束状态 }
}
调用：
animation: 动画名称 持续时间；
其中，animation属性的格式如下：
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
animation: move1 1s alternate linear 3;
animation: move2 4s;
2、动画属性
我们刚刚在调用动画时，animation属性的格式如下：
animation属性的格式如下：
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
animation: move1 1s alternate linear 3;
animation: move2 4s;
可以看出，这里的 animation 是综合属性，接下来，我们把这个综合属性拆分看看。
（1）动画名称：
animation-name: move;
（2）执行一次动画的持续时间：
animation-duration: 4s;
备注：上面两个属性，是必选项，且顺序固定。
（3）动画的执行次数：
animation-iteration-count: 1; //iteration的含义表示迭代
属性值infinite表示无数次。
（3）动画的方向：
animation-direction: alternate;
属性值：normal 正常，alternate 反向。
（4）动画延迟执行：
animation-delay: 1s;
（5）设置动画结束时，盒子的状态：
animation-fill-mode: forwards;
属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。
（6）运动曲线：
animation-timing-function: ease-in;
线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：等同于 steps(1, start)
step-end：等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
属性值可以是：linear ease-in-out steps()等。
注意，如果把属性值写成steps()，则表示动画不是连续执行，而是间断地分成几步执行。我们接下来专门讲一下属性值 steps()。
steps()的效果
我们还是拿上面的例子来举例，如果在调用动画时，我们写成：
animation: move2 4s steps(2);
css3动画基本知识：
1.过渡动画：transition动画
2.关键帧动画：animation动画 配合@keyframe实现
学习资料（CSS3动画详解（图文教程））
：https://www.cnblogs.com/smyhvae/p/8435182.html
css3手册：https://css.doyoe.com/
css loader
动画：https://github.com/ConnorAtherton/loaders.css
先克隆下来，然后运行demo目录中的文件
贝塞尔曲线
http://cubic-bezier.com/#.17,.67,.83,.67
perspective 透视
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
总结
过渡：transition ：不同状态的平滑过渡
两种效果
1 补间动画 ：自动完成开始到结束的过渡 期间移动效果平滑
2 帧动画 ： 按开始到结束的顺序播放 一卡一卡的效果
transition 有4个属性
1 transition-property: all;设置所有属性为过渡状态 值为all
none：不指定过渡的css属性
all：所有可以进行过渡的css属性
<IDENT>：指定要进行过渡的css属性
2 transition-duration: 1s; 指定过渡播放时间 职位时间数值 单位s
<time>：指定对象过渡的持续时间
3 transition-timing-function: linear; 过渡运动线路
值为
- linear 线性 ：直线过渡效果 等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
- ease 减速 ：平滑过渡 等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
- ease-in 加速： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
- ease-out 减速：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
- ease-in-out 先加速后减速：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
- step-start：等同于 steps(1, start)
- step-end：等同于 steps(1, end)
- steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
4 transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。
缩放：scale
transform: scale(x, y);
transform: scale(2, 0.5);
x：水平方向的缩放倍数。y：垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
取值：大于1表示放大，小于1表示缩小。不能为百分比
位移：translate
transform: translate(水平位移, 垂直位移)
transform: translate(-50%, -50%);
参数为百分比，相对于自身移动。
正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
旋转：rotate
transform: rotate(角度);
transform: rotate(45deg);
参数解释：正值 顺时针；负值：逆时针。
旋转：rotateX、rotateY、rotateZ
transform: rotateX(360deg); //绕 X 轴旋转360度
transform: rotateY(360deg); //绕 Y 轴旋转360度
transform: rotateZ(360deg); //绕 Z 轴旋转360度
移动：translateX、translateY、translateZ
transform: translateX(100px); //沿着 X 轴移动
transform: translateY(360px); //沿着 Y 轴移动
transform: translateZ(360px); //沿着 Z 轴移动
透视：perspective
电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出3d 效果，并不是正真的3d。
3D呈现（transform-style）transform-style: preserve-3d; transform-style: flat;
定义动画的步骤
（1）通过@keyframes定义动画；
（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
（3）在指定元素里，通过 animation 属性调用动画。
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>.box {
width: 100px;
height: 100px;
margin: 100px;
background-color: red;
/* 调用动画// animation: 动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。infinite 表示无限次//animation: move 1s alternate linear 3;*/animation: move2 4s;
}
/* 方式一：定义一组动画*/
@keyframes move1 {
from {
transform: translateX(0px) rotate(0deg);
}
to {
transform: translateX(500px) rotate(555deg);
}
}
/* 方式二：定义多组动画*/
@keyframes move2 {
0% {
transform: translateX(0px) translateY(0px);
background-color: red;
border-radius: 0;
}
25% {
transform: translateX(500px) translateY(0px);
}
/动画执行到 50% 的时候，背景色变成绿色，形状变成圆形/
50% {
/* 虽然两个方向都有translate，但其实只是Y轴上移动了200px。
因为X轴的500px是相对最开始的原点来说的。可以理解成此时的 translateX 是保存了之前的位移 */transform: translateX(500px) translateY(200px);
background-color: green;
border-radius: 50%;
}
75% {
transform: translateX(0px) translateY(200px);
}
/动画执行到 100% 的时候，背景色还原为红色，形状还原为正方形/
100% {
/坐标归零，表示回到原点。/transform: translateX(0px) translateY(0px);
background-color: red;
border-radius: 0;
}
}
</style></head><body><div class="box"></div></body></html>
动画属性
我们刚刚在调用动画时，animation属性的格式如下：
animation属性的格式如下：
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
animation: move1 1s alternate linear 3;
animation: move2 4s;
（1）动画名称： animation-name: move;
（2）执行一次动画的持续时间： animation-duration: 4s;
备注：上面两个属性，是必选项，且顺序固定。
（3）动画的执行次数： animation-iteration-count: 1; *属性值infinite表示无数次。
（3）动画的方向： animation-direction: alternate;*属性值：normal 正常，alternate 反向。
（4）动画延迟执行： animation-delay: 1s;
（5）设置动画结束时，盒子的状态： animation-fill-mode: forwards;
属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。
（6）运动曲线： animation-timing-function: ease-in;*属性值可以是：linear ease-in-out steps()等
steps()的效果 animation: move2 4s steps(2);
- @keyframes定义的动画名称用来被animation-name所使用。
- 定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：
- 示例代码：
- @keyframes testanimations {
- from { opacity: 1; }
- to { opacity: 0; }
- }
- 其中testanimations是该动画的名字，该动画表示某个东西将逐渐消失。
from to === 0% 100% 分别为最小值的数值 和最大值的数值
网友评论