CSS 动画属性有3个
01 transition（过渡）
在元素的开始与结束中间加上变化方式，并指定状态变化所需要的时间。通常搭配:hover使用，即鼠标触发动作。
一个完整的transition语法有4个组成部分，属性名 transition-property，时长transition-duration，过渡方式transition-timing-function 和 延迟transition-delay ，这四个部分会有一个初始值，
transition-delay: 0
stransition-duration: 0
stransition-property: all
transition-timing-function: ease一个完整的写法
img{
transition: 1s 1s height ease;
}也可以分开写
img{
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;
}属性名/ transition-property
指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画。可动画的属性是一个有限合集，参照mdn的文档，可以多个属性同时使用，需要将他们用逗号隔开，盒子的多个属性一起动画: width, height, background-color, transform ：
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-webkit-transition:width 2s, height 2s,
background-color 2s, -webkit-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width:200px;
height:200px;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}时长 / transition-duration
指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长。比如：
transition-duration: 0.5stransition-duration: 1s过渡方式 / transition-timing-function
指定一个函数，定义属性值怎么变化。
transition-timing-function: linear /* 直线匀速动 */ transition-timing-function: ease /* 先快后慢 */transition-timing-function: ease-in /* 先慢后快 */transition-timing-function: ease-out /* 一开始快后缓出 */transition-timing-function: ease-in-out /* 先缓入中间快后缓出 */transition-timing-function: cubic-bezier /* 立方贝塞尔曲线，可以做动画精细化调节 */transition-timing-function: step-start | step-end | steps /* 分步动，使用场景比较少 */延迟 / transition-delay
即属性开始变化时与过渡开始发生时之间的时长，这个比较少用到。
transition-delay: 0.5s注意事项：
- display:none =>block 没法过渡，一般改成visibility:hidden =>visible
02 animation （动画）
动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。animation只需要定义了属性，例如：动画名、时长、过渡方式、延迟、重复次数、动画方向、填充模式、是否暂停，动画的实际表现是由 @keyframes规则实现。
时长、过渡方式、延迟、重复次数、动画方向、填充模式、是否暂停、动画名，对应例子
animation:slidein 1s ease 1s infinite alternate paused;tips
过渡方式 animation-timing-function：ease可以让动画变得更顺滑
重复次数 animation-iteration-count：infinite 可以让动画循环往复动画方向 animation-direction：alternate经常用于做loading动画，可以来回运动。
填充模式 animation-fill-mode：forward可以让动画在最后一帧停止@keyframes有两种写法，
0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。其中identifier为被定义的动画名
@keyframes identifier {
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}@keyframes slidein {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}其中填充模式比较难理解，摘自思否Druidiurd的一个答案
完成状态，执行完最后一帧时，元素处于的状态
如果你理解最后一帧，就能理解完成状态。ifinite 的动画没有完成状态。
animation-fill-mode 取值 none。表示动画结束，元素回归初始状态，而且是瞬间回归，无动画效果。
animation-fill-mode 取值 forwards 或者 both。表示动画执行完最后一帧，保持在最后一帧样式。再次申明，最后一帧可能为 @keyframes 中的 0% 或者 100% 之一。
最后总结- none 表示 等待期和完成期，元素样式都为初始状态样式，不受动画定义（@keyframes）的影响。
- both 表示 等待期样式为第一帧样式，完成期保持最后一帧样式。
- backwards 表示等待期为第一帧样式，完成期跳转为初始样式
- forwards 表示等待期保持初始样式，完成期间保持最后一帧样式。
03 transform （变形）
transform属性有常用的四个功能，通常需要搭配transition使用加过渡，inline元素也不支持transform，需要变成 block。
四个常用属性
transform: translate(50%, 50%); /* 位移，这个也可以做绝对定位的居中 */
transform: scale(2); /* 缩放，2为倍数 */
transform: rotate(0.5turn); /* 中心为原点，旋转 */
transform: skew(30deg, 20deg); /* 扭曲、倾斜，deg表示度数 */
transform: scale(0.5) translate(-100%, -100%); /* 可以多个属性同时使用 */
translate位移常用写法
- translateX(length percentage)
- translateY(length percentage)
- translate (length percentage,length percentage)
- translateZ(length)且父容器perspective
- translate3d(x,y,z)
scale缩放常用写法
- scaleX(number)
- scaleY(number)
- scaleY(number number)
rotate旋转常用写法，（一般用于360度旋转loading）
- rotateX(angle zero)
- scaleY(angle zero)
- scaleY(angle zero)
- scaleZ(angle zero)
浏览器渲染原理
了解浏览器原理是为了设定页面性能优化方案，目前的知识还不足以有一个充分理解，先留个坑，以后再来啃。
- 根据html构建html树 DOM（Document Object Model）
- 根据css构建css规则树 CSSOM（CSS Object Model）
- 将两棵树合并成一棵渲染树 render tree
- 进行Layout 布局（文档流，盒模型、计算大小和位置）
- Paint 绘制 把边框颜色、文字颜色、阴影画出来
- Compose合成（根据层叠关系展示画面
