所有的过渡必须明确指定改变数值，height，width等必须是精确地数值或百分比，不能为auto；
只要能明确改变属性数值的事件都可以触发过渡，class，JavaScript，hover等；
.height-animate {-webkit-transition: -webkit-transform .3s ease-in-out, height .3s ease-in-out;-moz-transition: -moz-transform .3s ease-in-out, height .3s ease-in-out;-o-transition: -o-transform .3s ease-in-out, height .3s ease-in-out;transition: transform .3s ease-in-out, height .3s ease-in-out}.all-animate {transition: all .5s;transition-property: all;transition-duration: .5s;transition-timing-function: initial;transition-delay: initial;}
2、动画
@keyframes anm {0% {width: 10px;height: 10px;}50% {width: 200px;}100% {width: 200px;height: 100px;}}.demo {display: inline-block;background: green;}.demo:hover {-webkit-animation-name: anm;-moz-animation-name: anm;-o-animation-name: anm;animation-name: anm;animation-timing-function: ease-in-out;animation-duration: 2s;animation-fill-mode: forwards; /*动画结束时停留在最后一帧*/}
3、变形
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>.demo img {transition: all 0.3s ease-in-out;}.demo img:hover {transform: translate(100px) scale(1.5);}@keyframes anm {0% {transform: rotate(0deg)}50% {transform: rotate(90deg)}100% {transform: rotate(180deg)}}.demo2 img:hover {-webkit-animation-name: anm;-moz-animation-name: anm;-o-animation-name: anm;animation-name: anm;animation-timing-function: ease-in-out;animation-duration: 2s;animation-fill-mode: forwards; /*动画结束时停留在最后一帧*/}</style></head><body><div class="demo"><img src="img/question_mark.png">aaaaaa</div><br><div class="demo2"><img src="img/question_mark.png">aaaaaa</div></body></html>
