语法：
transition: property duration timing-function delay;
注释：
transition-property 指定CSS属性的name，transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
transition-delay 定义transition效果开始的时候（停顿多少时间后执行）
案例：
div{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover{
width:300px;
}
二、动画
a、首先需要利用@keyframes 定义规则
语法：
@keyframes animationname {keyframes-selector {css-styles;}}
注释：
animationname 必需的。定义animation的名称。
keyframes-selector 必需的。动画持续时间的百分比。
合法值：
0-100%
from (和0%相同)
to (和100%相同)
css-styles 必需的。一个或多个合法的CSS样式属性
b、规则定义好后，需要使用animation进行设置和调用
语法：
animation:
name
duration
timing-function
delay
iteration-count
direction
fill-mode
play-state;
注释：
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。infinite代表无限次
animation-direction 指定是否应该轮流反向播放动画。
normal 默认值。动画按正常播放。
reverse 动画反向播放。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
animation-play-state: paused|running; 指定动画是否正在运行或已暂停。
案例：
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
}
@keyframes mymove{
from {left:0px;}
to {left:200px;}
}
三、弹性盒子
------容器属性------
1、将盒子转化为弹性容器
display:flex;
2、设置主轴方向
flex-direction属性（主轴的方向）
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
3、子项目是否换行
flex-wrap属性（是否换行）
nowrap（默认）：不换行。
wrap：换行
wrap-reverse：换行，第一行在下方。
4、主轴对齐方式
justify-content（在主轴上的对齐方式）
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly: 两个项目之间的距离相等（每个项目左右边的空隙相等）
5、交叉轴上的对齐方式
align-items （交叉轴上的对齐方式）
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。 （文字的基线：是指文字的最底部的文字）
stretch（默认值）：
如果项目未设置高度或设为auto，将占满整个容器的高度。
如果项目 设置高度或设为auto，效果与 flex-start 一样，所以一般也说flex-start为默认值。
6、多轴对齐方式（多行/多列）
align-content （多根轴线的对齐方式）
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：
每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：
轴线占满整个交叉轴。项目没有高度时才会占满整个交叉轴 。
有高度时将是高度大小（则项目之间会有间隔）。
------项目属性------
#属性定义项目的放大比例，默认为0（不放大），即如果存在剩余空间，也不放大。
flex-grow:number; //number>=0
#属性定义了项目的缩小比例，默认为1（一起缩小），即如果空间不足，该项目将缩小
flex-shrink:number; //number>=0
#属性设置项目自身在交叉轴的排列方式
align-self：auto | flex-start | flex-end | center | baseline | stretch
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
