就是元素从这个属性(color)的某个值(red)过渡到这个属性(color)的另外一个值(green)，这是一个状态的转变，需要一种条件来触发这种转变，比如我们平时用到的:hoever、:focus、:checked、媒体查询或者JavaScript。
语法：transition: property duration timing-function delay;
值描述transition-property规定设置过渡效果的 CSS 属性的名称transition-duration规定完成过渡效果需要多少秒或毫秒transition-timing-function规定速度效果的速度曲线transition-delay定义过渡效果何时开始例如：
transition:all 2s linear 0s;
设置所有元素有过渡效果，完成过渡效果时间为2s，过渡速度曲线为线性，过渡效果开始时间为0s
2.动画（animation）在官方的介绍上介绍这个属性是transition属性的扩展，弥补了transition的很多不足，我理解为animation是由多个transition的效果叠加，并且可操作性更强，能够做出复杂酷炫的效果。
语法：animation: name duration timing-function delay iteration-count direction play-state fill-mode;
值描述name用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致duration指定元素播放动画所持续的时间timing-function规定速度效果的速度曲线，是针对每一个小动画所在时间范围的变换速率delay定义在浏览器开始执行动画之前等待的时间，值整个animation执行之前等待的时间iteration-count定义动画的播放次数，可选具体次数或者无限(infinite)direction设置动画播放方向：normal(按时间轴顺序),reverse(时间轴反方向运行),alternate(轮流，即来回往复进行),alternate-reverse(动画先反运行再正方向运行，并持续交替运行)play-state控制元素动画的播放状态，通过此来控制动画的暂停和继续，两个值：running(继续)，paused(暂停)fill-mode控制动画结束后，元素的样式，有四个值：none(回到动画没开始时的状态)，forwards(动画结束后动画停留在结束状态)，backwords(动画回到第一帧的状态)，both(根据animation-direction轮流应用forwards和backwards规则)，注意与iteration-count不要冲突(动画执行无限次)例如：animation：history 5s ease 0s infinite normal running none；
名称为history，动画持续时间5s，速度曲线为ease，延迟时间为0s，无限循环模式，动画播放方向按时间轴顺序，设置动画为运行状态，动画填充模式为返回动画开始状态。
Document
div{
width: 100px;
height: 100px;
background-color: blue;
animation: history 5s ease 0s infinite normal running none;
}
@keyframes history{
0%{
transform: translateX(0px);
}
20%{
transform: translateX(10px);
}
50%{
transform: translateX(100px);
}
100%{
transform: translateX(300px);
}
}
animation与transition 不同的是，keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大，使得flash的部分动画效果可以由css直接控制完成，而这一切，仅仅只需要几行代码，也因此诞生了大量基于css的动画库，用来取代flash的动画部分。
示例：跳动的心
Document
*{
margin: 0;padding: 0;box-sizing: border-box;
}
.heart{
width: 100px;
height: 100px;
position: relative;
margin: 150px auto;
/* 设置动画可以往返 */
animation: heart 0.5s infinite alternate;
}
@keyframes heart{
from{
transform: scale(1);
}
to{
transform: scale(2);
}
}
.heart>.left{
background-color: red;
width: 100px;
height: 100px;
border-radius: 50% 0 0 50%;
position: absolute;
transform: rotate(45deg) translateX(-70px);
}
.heart>.right{
background-color: red;
width: 100px;
height: 100px;
border-radius: 50% 50% 0 0;
position: absolute;
transform: rotate(45deg) translateY(-70px);
}
.heart>.bottom{
background-color: red;
width: 100px;
height: 100px;
transform: rotate(45deg);
}
实现效果：
