过渡阶段特性
过渡阶段是原素从一类式样渐渐发生改变为另一类的效用，很大要加进过渡阶段稳步天数才有过渡阶段效用 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)，他们表述德帕伦抛物线的速率类别 div{ 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: 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 div{ 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-outanimation-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
<div class=“animate__animated animate__pulse”>我是文本</div>
