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"）。