2019独角兽企业重金招聘Python工程师标准>>> 
animate() 函数用于执行一个基于css属性的自定义动画。
你可以为匹配的元素设置css样式，animate()函数将会执行一个从当前样式到指定的css样式的一个过渡动画.
例如：某个div元素的当前高度为100px，将其CSS height属性设为200px，animate()将会执行一个将div元素的高度从100px逐渐增加到200px的过渡动画。
语法：
(selector).animate({styles},speed,easing,callback)复杂动画：
1定义动画名：
@keyframes mymove{
0%{}
..
50%{}
..
100%{}
}
2在css里面调用动画
div{animation: animate-name /*启动动画的名字（*）*/
animation-duration /*一个周期完成的时间（*）*/
animation-iteration-count /*动画播放次数，值可为数字和infinite（无限次播放）*/
animation-timing-function /* 动画速度曲线 linear 从头到尾匀速
ease默认。低速开始，加速过程，低速结束
ease-in 低速开始
ease-out 低速结束
ease-in-out 低速开始和结束
*/
animation-delay /*动画延迟，秒单位 2s*/
}transtion允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。
语法：
transtion：transition-property /*过渡效果的 CSS 属性的名称,值可为all*/
transition-duration /*完成过渡效果需要多少秒或毫秒*/
transition-timing-function /*速度效果的速度曲线*/
transition-delay /*延迟时间*/
例如，当鼠标移上,触发效果：
首先，定义触发的效果css样式
div:hover{
background:red;
font-size:14px;
color:#ffffff;
}其次，在div的原样式中添加
transtion:all .2s ease-in;表示，当鼠标移上，在2s内，div的背景变成红色，字体变成14像素，颜色变成白色。
transfrom 改变，使…变形；
它的常用属性：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。
rotate()，单位为deg,例如：ratate(30deg);表示旋转30度。
skew(),单位deg，表示倾斜。例如：skew(30deg)。表示以中间为中心，顺时针倾斜了30度。
scale()，放大或缩小，例如scale(1.1)。表示在原来的大小上，宽，高各放大1.1倍。
translate(x,y)，变动，移位。例如translate(120px,10px)，表示，在原来的位置上，向左移动了120px,向下移动了10px。
综合使用：
transfrom:rotate(30deg) skew(30deg) scale(1.1) translate(120px,10px);那transfrom如何和transtion联合使用呢？
在上述的鼠标移上，触发效果中：
div:hover{
background:red;
font-size:14px;
color:#ffffff;
transfrom: rotate(30deg) skew(30deg) scale(1.1) translate(120px,10px);
}则，当鼠标一上去才会触发变形，而不是页面刷新过后就是变形后的样式，这样有了一个过渡性的变化。