目录
过度动画transition
多属性值过渡
2d变形transform
平移
应用：实现居中(不要求知道盒子的宽高)
缩放
旋转
倾斜
修改变形中心的属性
变形属性的复合写法
3D变形动画
3d平移
景深属性(视距)
3D旋转
绕X轴旋转:
绕Y轴旋转:
绕Z轴旋转
绕面旋转
绕体旋转
背面隐藏属性
保留3d状态(用在没有事件触发时候显示3d效果)
关键帧动画（补间动画）
定义
css3动画库 animate.css
过度动画transition
transition:要过度的属性名字 持续时间s 延时时间0s 运动曲线;谁做变化写到谁身上！
(1)写在盒子身上事件触发完毕以后过渡动画逆序执行一次最终--最初加过渡！！
(2)一般来说 ，通过事件触发 :hover :active
写在事件里:active事件触发完毕以后过渡动画就结束了回到最初状态的时候不会再有持续时间！！
transition:要过度的属性名字 持续时间s 延时时间0s 运动曲线;1. 要过渡的属性必须拥有具体的可以计算的值！！ width,height,background-color,opacity...均可过渡但是display:none/block visibility:hidden/visible text-align:left /center不支持过渡;2. 持续时间属性值必不可少！！3. 延时时间默认为0s4. 运动曲线 linear匀速 ease放缓(慢--快--慢)（默认值） ease-in以快结尾
多属性值过渡
transition: width 2s 0s linear,height 1s 0s linear,opacity 1s 0s linear.....;transition:all 1s;//所有要变化的属性的持续时间 延时时间 运动曲线一致 就省略了transition:1s;//省略的是all
2d变形transform
行内元素不能进行变形动画
平移
transform:translate(x,y) 水平x 垂直y +x +y -x -ytransform:translate(300px,500px);transform:translate(50%,-50%) 自身宽高宽高的一半
单位:+xpx,+ypx向x轴的正方向（右）和y正方向（下）
-xpx,-ypxx反方向(左)y反方向(上)
+x%向右移动了自身宽度的x%
50%,0%向右移动了自身宽度的一半！！
-50%,0%向左移动了自身宽度的一半！
+y%向下移动了自身高度的y%
+50%向下移动了自身高度的一半！！！
rem
transform:translate(2rem,-3rem)
应用：实现居中(不要求知道盒子的宽高)
div {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
缩放
transform:scale(w,h); w,h=0 w<1 缩小 w>1 放大transform:scale(1.2);等比例放大w: 是宽度的缩放倍数h: 是高度的缩放倍数w=h 那么只需要写一个值即可！！！transform: scale(2,2);=== transform: scale(2);w,h>1放大w,h<1缩小w,h = 1不变化w,h=0 没有了 消失了
应用： 显示小于12px字体
默认字体:font-size:12px 显示10px字体 行内块+块类型的盒子 +transform:scale(10/12);
旋转
transform:rotate(ndeg);+ndeg 顺时针旋转 -ndeg 逆时针旋转
旋转参考原点(中心点)盒子的中心(centercenter/50%50%)
当你只写一个值时，第二个值默认是center
倾斜
transform:skew(xdeg,ydeg); xdeg在x轴有倾斜倾斜度数为xdeg y在y轴有倾斜-xdeg 在x正方向的倾斜+xdeg 在X负方向的倾斜+ydeg 向着y轴的负方向倾斜 -ydeg向着y轴的正方向倾斜transform:skew(xdeg) 只有x轴倾斜
修改变形中心的属性
d,3d修改变形中心transform-origin:center center(默认值，中心)xpx ypx/ x% y% /right top bottom left centertransform-origin:100% 0%; 修改变形中心到盒子的右上角
变形属性的复合写法
变化样式可以使用复合写法，如 transform: scale( ) translate（ ） skew( ) rotate( );
变化样式内多个样式值顺序的不同会导致完全不一样的结果
transform:translateX(200px) translateY(300px) rotate(45deg);
transform:rotate(45deg) translateX(200px) translateY(300px) ;
3D变形动画
3d坐标系 --》左手定则 食指(y) 中指(z) 大拇指 (x)
3d平移
ttransform:translate3d(x,y,z);z 代表沿着z平移 +z 正方向移动 -z 负方向移动transform:translateX(300px);transform:translateY(300px);transform:translateZ(300px);transform:translate3d(300px,300px,300px);transform:translateX(300px) translateY(300px) translateZ(300px);(时间顺序)
单位px/%/rem
x沿着x轴平移
+zpx沿着z轴正方向平移(变形盒子的正前方就是z轴从屏幕出来+z穿到屏幕-z)
景深属性(视距)
不为0视距---》形成一个3d效果 ，3d空间---》近大远小
perspective:800px;( 600px--1000px) 800px 就代表你的眼睛到3d变形物体有800px的距离
保证你的眼睛到box盒子的景深距离是一致的！！
你就把景深写到盒子.box身上去!
1.写在父盒子身上perspective:600px;
2.写在自己身上加在变形属性里perspective()
transform:perspective(500px) rotateY(30deg);
一般，设置到变形元素的父盒子身上即可 是在事件触发时才会使用景深去营造3d效果
3D旋转
transform:rotate3d(x,y,z,ndeg);x:1/0 1:沿着X轴有旋转 0沿着x轴没有旋转y:1/0 1:沿着y轴有旋转 0沿着y轴没有旋转z:1/0 1:沿着z轴有旋转 0沿着z轴没有旋转x: 1/200/300 代表在x轴上有旋转x: 0 代表在x轴上没有旋转ndeg 代表旋转度数
绕X轴旋转:
transform:rotate3d(1,0,0,45deg); 绕着x轴旋转了45deg等同于transform:rotateX(45deg);
绕Y轴旋转:
transform:rotate3d(0,1,0,45deg); 绕着y轴旋转了45deg等同于transform:rotateY(45deg);
绕Z轴旋转
transform:rotate3d(0,0,1,45deg); 绕着z轴旋转了45deg等同于transform:rotateZ(45deg);
绕面旋转
transform:rotate3d(1,1,0,45deg); 绕着x轴和y轴组成的平面对角线旋转了45deg
绕体旋转
transform:rotate3d(1,1,1,45deg); 绕着x轴和y轴和z轴组成的体对角线旋转了45deg
背面隐藏属性
backface-visibility: hidden隐藏/visible可见的(默认的);
什么时候一个面会成为反面?
旋转180deg或者-180deg浏览器才会认为是反面
保留3d状态(用在没有事件触发时候显示3d效果)
transform-style:preserve-3d保留3d效果/flat回到2d状态（回到最初状态 默认值）
不需要通过任何鼠标事件即可保持旋转度数！！
事件去触发:hover:active(过渡)+景深营造3d空间！！
无事件触发的情况下+保留3d效果的属性营造3d空间！！！
保留3d效果的属性:
transform-style:preserve-3d(保留3d效果)/flat(2d效果)
同样写在父盒子身上！！！
关键帧动画（补间动画）
小车折返： 初始状态 (100px,100px) ----> 树跟前装上去(400px,400px)---->旋转掉头(300px,300px)---->最初位置
动画： 多个状态的持续！！！ 不需要事件触发 自发进行
定义
@keyframes 动画的名称 {//几个关键状态 0% {//最初状态 css代码;}.....n%{}100% {//最终的状态}}
animation:动画的名称 持续的时间 【运动的曲线 延时的时间 执行的次数 是否往返 运动的状态 动画最后一帧的状态】; 动画的名称 animation-name:动画的名称;持续的时间 animation-duration:ns;运动的曲线 animation-timing-function:linear/ease/ease-in/ease-in-out..延时的时间 animation-delay: ns;执行的次数 animation-iteration-count:1默认/2/3/infinite;是否往返 animation-direction:normal不往返/alternate往返运动的状态 animation-play-state:running播放/paused停止动画最后一帧的状态animation-fill-mode: forwards动画保持最后一帧的状态/backwards动画回到第一帧的状态 both:动画没执行时候就保持动画第一帧的状态，执行完毕保持最后一帧状态！
css3动画库 animate.css
网址: Animate.css | A cross-browser library of CSS animations.
引入动画库:
<head><linkrel="stylesheet"href="/ajax/libs/animate.css/4.1.1/animate.min.css"/></head>
使用动画
<h1 class="animate__animated animate__bounce">An animated element</h1>
