一，过渡属性
1，transition
key：transition;
transition:过渡的属性 过渡时间 运动曲线 延长时间；
| key | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性 |
| transition-property | 规定应用过渡的css属性的名称 |
| transition-duration | 定义过渡效果花费的时间，默认0； |
| transition-timing-function | 规定过渡效果的时间曲线；默认是"ease" |
| transition-delay | 规定过渡效果如何开始；默认是0； |
2，transition的值
（1）transition-property过渡属性
none表示没有属性过渡；
all表示所有属性都过渡；
属性名，使用具体的属性名，多个属性名中间逗号分隔；
时间 过渡时间：以s为单位； 延时时间：以s为单位，0s也必须加单位；
（2）transition-timing-function时间曲线
| 值 | 描述 |
|---|---|
| linear | 规定以相同的速度开始至结束的过渡效果 |
| ease | 规定以慢速开始，然后变快，然后慢速结束的过渡效果 |
| ease-in | 规定以慢速开始的过渡效果 |
| ease-out | 规定以慢速结束的过渡效果 |
| ease-in-out | 规定以慢速开始和结束的过渡效果 |
| cubic-bezier(x1,y1,x2,y2) | 规定以慢速开始和结束的过渡效果 |
（3）贝塞尔曲线
贝塞尔曲线可以在浏览器中去选择我们所需要的效果值；
3，浏览器兼容
我们可以给属性前面添加-weibit-浏览器内核达到兼容效果
transition: all 1s linear 2s;
-webkit-transition: all 1s linear 2s;
二，2D转换
transform
key:transform;
作用:对元素进行移动，缩放，转动，拉长，或拉伸，配合过渡属性和即将学习的动画以取代大量之前只能依靠flash才可以实现的效果；
value：多种转换方法的属性值，可以实现不同的转换效果；
css3中transform的魔法技能
从前面的学习中我们可以知道知道position：fixed；是根据浏览器窗口去确定自己的位置
那么有什么办法可以让他根据父盒子去确定自己的定位呢，我们只需要给父盒子添加transform：属性值；有实际意义的属性就可以做到
同样position：absolute；给他的父级用transform这个属性就能根据他的父级去定位；
transform的值
1，translate位移
| 值 | 说明 |
|---|---|
| translate(x,y) | x,y分别为水平和垂直方向位移距离，可以是px或百分比，区分正负 |
| translate(x) | 只有应该数值，表示水平方向的位移 |
小案例：利用这个属性做盒子的位移和，盒子的居中效果
2，scale缩放
| 值 | 说明 |
|---|---|
| scale(x,y) | x,y分别为改变 |
| scale(n) | 表示宽度高度同时缩放n倍 |
| scaleX(n) | 改变元素宽度 |
| scaleY(n) | 改变元素高度 |
3，rotate旋转
rotate(数字deg) deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转，2d的旋转只有一个属性值；
我们给transform属性设置rotate旋转再给它translate位移可以发现translate位移方向不再是根据水平的x轴去移动，而是根据我们rotate角度后的x轴方向去移动
3，skew倾斜
书写语法：transform：skew（数字deg，数字deg）；两个属性值分别代表水平和垂直方向的倾斜角度，属性值可以为正可以为负，第二个数值不写默认为0；
transform-origin
作用：设置调整元素的水平和垂直方向原点的位置，设置元素的基准点 属性值：包含两个，中间用空格隔开;
| 值 | 说明 |
|---|---|
| x | 定义x轴的原点在何处；可能的值：left，centent，right，px，% |
| y | 定义y轴的原点在何处；可能的值：left，centent，right，px，% |
2D卡包小案例：
三，3D转换
1，透视属性perspective
电脑显示屏是2D屏幕，图片之所以具有立体感（3D效果），其实只是一种视觉呈现通过透视这个属性可以实现效果；
key：perspective；
作业：设置在z轴的视线焦点的观察位置，从而实现3D查看效果
value：像素值，数值越大，观察点距离z轴原点越远，图片效果越接近原始尺寸 注意：透视属性需要设置给3D变化元素的父级
在3D动画属性中，根据这样的3D坐标轴的方向去移动
transform属性不仅可以实现2D转换，也可以制作3D立体转换效果；
2，rotate旋转（3D）
| 值 | 说明 |
|---|---|
| rotateX（angle） | 定义沿着X轴的3D旋转 |
| rotateY（angle） | 定义沿着Y轴的3D旋转 |
| rotateZ（angle） | 定义沿着Z轴的3D旋转 |
3，translate位移（3D）
| 属性值 | 说明 |
|---|---|
| translateX（x） | 设置x轴的位移值 |
| translateY（y） | 设置y轴的位移值 |
| translateZ（z） | 设置z轴的位移值 |
4,transform-style
用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴。
属性值：
| 标题 | |
|---|---|
| flat | 所有子元素在2D平面呈现 |
| preserve-3d | 保留3D空间 |
3D元素构建是指某个图形是由多个元素构成，可以给这些元素的父元素设置transform-style:preserve-3d,来使其变成一个真正的3D图形,一般来说，该属性设置3D变化图形的父级元素。
四，css3动画制作方法
css3的动画制作可以分为两步：
1，创建动画
在@keyframes中规定某项css样式，就能创建由从一种样式逐渐转化为另一种样式的效果，可以改变任意多次样式任意多的次数；
需要使用百分比规定变化发生的时间，或者是关键词"form"，"to",等同于"0%" "100%" 0%是动画的开始，100%是动画的完成；
语法：
@keyframes 动画名称 {
动画的过程，可以添加任意百分比在此处的动画细节
}
2，绑定动画
key：animaition
| 属性 | 描述 |
|---|---|
| animation-name | 规定@keyformes动画名称 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒；默认是0 |
| animation-timing-function | 规定动画的速度曲线；默认是"ease" |
| animation-delay | 规定动画何时开始，默认是0 |
| animation-iteration-count | 规定动画播放的次数，默认是1，infinite表示无限次播放 |
value:动画的名称 过渡时间 速度曲线 动画次数 延迟时间 animation: bear-one 6s 贝赛尔曲线 infinite（这里可以用无限次） alternate（这个可以让动画结束的时候按照原轨迹返回回去，而不是马上回到原位）;
浏览器兼容 chrome和safari需要前缀-webkit-，更多浏览器的兼容问题
五，动画案例
1，百叶扇
2，旋转立体盒
制作思路：
1，先把六个div利用定位属性叠在一起
2，利用rotate和tranlate旋转和位移把六个div放到对应的六个面上；
3，开启transform-style: preserve-3d;3D属性 然后给父盒子 transform: rotateX(360deg) rotateY(360deg);让整个盒子360度的旋转起来
完整代码实现在下面 html和style部分
3,翻页
制作思路：
1，利用定位元素把两个图片叠在一起
2，绑定动画，让上面的这个图片往左边翻转，所以这个时候我们需要改变它的基准线让基准线transform-origin:left;让它沿着左边的这一条线去翻转，翻转的动画如下，最后设置animation的最后添上alternate的属性值让动画回到原位的时候更加的自然。
@keyframes bear-one {
0% {
transform: rotate3d(0, 1, 0, 0deg) skewY(0deg) translateY(0px);
}
50% {
transform: rotateY(-237deg) skewY(10deg) translateY(0px);
}
100% {
transform: rotateY(-143deg) skewY(4deg) translateY(0px);
}
}
完整代码实现在下面 marup和style部分
4，吃豆豆
制作思路：
1，张开嘴巴合上原理是利用两个div去绑定动画给一个上下rotate对应角度
@keyframes head-1 {
form {
transform: rotate(0deg);
}
to {
transform: rotate(-30deg);
}
}
@keyframes head-2 {
form {
transform: rotate(0deg);
}
to {
transform: rotate(30deg);
}
}
2，但是我们会遇到一个问题就是当它rotate（30deg）；完成后回到原位的动画不自然，我们就可以给上一个animation的最后添上alternate的属性值让动画回到原位的时候更加的自然，再给父盒子一个border-radius：50%；让它可以变成圆形，再给一个overflow：hidden；让其溢出部分隐藏；
animation: head-1 .4s ease infinite alternate;
3，眼睛的部分就非常简单啦，我们只需要设置好对应的样式，再让它用position：ablsolute；定位元素移动到我们想要的位置
4，豆豆移动其实是让一个豆豆设置动画去移动，后面的豆豆是跟着第一个豆豆去移动的所以我们这里可以只写一个豆豆，然后后面的豆豆直接用box-shadow盒子阴影属性去实现；
给第一个豆豆设置动画
@keyframes peas-1 {
form {
transform: translateX(0);
}
to {
transform: translateX(-70px);
}
}
让盒子阴影跟着他的盒子去移动达到效果
box-shadow: 70px 0px rgb(31, 230, 31),
140px 0px rgb(31, 230, 31),
210px 0px rgb(31, 230, 31),
280px 0px rgb(31, 230, 31),
350px 0px rgb(31, 230, 31);
完整代码实现在下面 marup和style部分
5，抖音刷新
