jquery之animate()和css3 animation属性的本质区别

jquery之animate()

前提:要动画的元素开启定位或浮动：position或float

语法:animate({属性名:属性值},speed,callback) 这里只列出常用的参数，详情请参考官方文档

1.speed的取值为slow,fast,毫秒(动画执行的速度,毫秒值越大速度越慢)

2.callback 动画执行完后要执行的函数

css3之animation属性

animation-name	绑定到选择器keyframe名称
animation-duration	动画完成一个周期所花费的时间
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	动画的播放次数 值为数字或infinite(无限次)
animation-direction	规定是否应该轮流反向播放动画。值为normal或alternative(反向循环播放)
animation-fill-mode	动画状态 none,forwards(动画完成后保留在最后一个属性值上，即不循环)

简写：

animation:动画名 时长 速度曲线 延迟 播放次数(数字,infinite(无限次)) 动画方向(normal/alternative)

animate()和animation区别

1.animate() 执行完后保留在最后一个属性即从一个状态变为另一个状态，不会重复执行，只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

2.animation 会往返执行动画 但可设置forwards使其保留在最后一帧的位置，只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。