过渡属性

　　过渡就是元素从一种样式逐渐改变为另一种的效果，一定要添加过渡持续时间才有过渡效果 transition: 要过渡的属性 【持续的时间】 延迟时间 速度类型;

　　transition-property: all,width,height;过渡的属性取值：

　　all 过渡的所有属性property 要过渡的属性none 没有过渡的属性

　　transition-duration: 2s,1s;过渡持续的时间，必需项，不写或为0都是没有过渡transition-delay：2s,1000ms; 过渡的延迟时间，等待几秒开始过渡transition-timing-function: ease;过渡的速度类型取值：

　　ease：默认值（慢-快-慢）ease-in 【慢速结束】的运动 （加速）ease-out 【慢速结束】的运动 (减速)ease-in-out【慢速开始慢速结束】的运动（开始加速最后减速）linear 【匀速】的运动cubic-bezier(1, 0.16, 0, 1.02)，自己定义贝塞尔曲线的速度类型 p{ transition: all 3s 2s linear; }css3变换：

　　transform属性,大多数浏览器都，默认值为none,也可以设置函数来进行变换2d变换

　　css3中2d变换坐标轴：水平向右是x轴正值，垂直向下是y轴正值2d平移

　　transform:translate(x,y) 2d平移,两个值：

　　水平方向平移距离20px，正值向右移动距离20px，负值向左移动垂直方向平移距离，正值向下移动，负值向上移动一个值：水平方向移动的距离

　　指定方向写法：translateX(20px),指定水平方向移动距离translateY(20px),指定垂直方向移动距离2d旋转

　　transform：rotate(deg),2d旋转取值：正值：顺时针负值：逆时针2d缩放

　　transform：scale(x,y) 默认值为1两个值：元素的宽，元素的高一个值：宽高同比例的缩放取值

　　值在0-1之间 ：缩小值>1：放大值<0：先翻转后缩放指定方向进行缩放

　　scaleX()指定宽度缩放scaleY()指定高度缩放2d倾斜(拉伸)

　　transform：skew(x,y) 元素倾斜改变元素在页面中的形状两个值：水平方向和垂直方向同时倾斜一个值：只有水平方向倾斜，第二个值不写就是0取值：角度指定方向进行倾斜

　　skewX() 仅水平方向(X轴)倾斜skewY() 仅垂直方向(Y轴)倾斜示意图：

　　 transform:skew(30deg,10deg);倾斜效果如下图1

　　 transform:skewX(30deg);倾斜效果如下图2

　　transform:skewY(10deg);倾斜效果如下图3

　　注意：多个变形用空格分隔

　　transform: rotate(360deg) scale(0.5);

　　transform-origin:改变元素的变换原点取值： 水平：left center right 垂直：top center bottom注意：只写一个方向，另一个默认居中3d变换

　　css3中3d变换坐标轴：水平向右是x轴正值，垂直向下是y轴正值,向前是z轴的正值transform-style:规定嵌套的子元素是否以3d空间展示preserve-3d:让子元素保留其3d位置flat：不保留其3d位置注意：不能和overflow:hidden同时使用，会让子元素的3d空间失效

　　perspective:数值视距，让3d元素有近大远小的效果建议500p-800px3d的平移

　　transform:translateZ(npx) 3d沿z轴平移正值：向前移动负值：向后移动 transform:translate3d(x,x,z),同时移动3个方向的距离3d的旋转

　　transform:rotateX(deg) 正值：向里面，负值：向外面rotateY(deg) 正值：向右，负值：向左rotateZ(deg) 正值：顺时针，负值：逆时针transform: rotate3d(1,1,1,45deg);3d的缩放

　　transform: scaleZ():z轴的缩放大小 scale3d(1.2,1.2,1.2)三个方向进行缩放盒子水平垂直居中的小技巧

　　在不知道宽高的时候，可以通过transform:translate()来实现盒子的水平垂直居中，使用时要考虑到兼容性问题 .wrap{ position:relative } .wrap2 p{ background-color: green; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }css3帧动画

　　1. 定义动画（关键帧）

　　 @keyframes 动画名称 { from{} to{} } @keyframes 动画名称 { 0%{} 动画的开始 30%{} 50%{} .... 100%{} 动画的结束 }注意：动画名称是英文，名字自定义，比如：move scale

　　2. 调用动画

　　animation: animation-name animation-duration animation-timing-function animation-delay animation-direction animation-fill-mode 【动画名称 动画时间】 动画速度类型 动画的延迟时间 动画是否反向 动画是否保持最初或最后的状态animation-name 规定需要绑定到选择器的 keyframe 名称。。animation-duration 规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function 规定动画的速度曲线。linear 匀速easeease-inease-outease-in-out

　　animation-delay 规定在动画开始之前的延迟。animation-iteration-count 规定动画应该播放的次数。n 动画n次，默认是1次infinite 无穷次

　　animation-direction 规定是否应该轮流反向播放动画。reverse 反向播alternate 正向反向轮流播normal 正向播

　　animation-fill-mode 动画是否保持第一帧或者最后一真的状态forwards: 动画结束保持最后一帧的状态both: 动画结束保持最后一帧的状态,动画未开始时保持第一帧状态backwards: 动画未开始时保持第一帧状态，需要配合延迟才能看出效果

　　注意： animation-duration 属性，默认值为0，需要设置该属性，否则不会播放动画3. 动画库

　　animate.css css3动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等动画效果；官网网址：animate.style使用方法：1) 引入css动画库

　　 <link rel="stylesheet" href="./css/animate.css">2) 找到标签，添加基本类名animate__animated，和动画类名animate__pulse

　　 <p class="animate__animated animate__pulse">我是文本</p>