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