持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第12天,点击查看活动详情
动画
transition:
transition能过渡大部分样式而且支持多样式同时过渡,注意标签元素上有多个样式类时,与过渡样式相关的最后2个样式会形成过渡效果。
animation:
注意使用animation-play-state:paused可以使动画就地暂停,animation-play-state: ‘’可以使动画在暂停的状态继续进行
jQuery动画:
jQuery动画与CSS3动画不同,jQuery动画是js驱动的,jQuery动画与CSS3动画是互补关系(而非谁取代谁)。jQuery内置了一些动画,如(fadeIn/slideUp等),也支持通过animate()方法自定义动画。而且提供了强大的动画控制API,如动画延迟、链式动画(上一个动画结束后开始下一下动画)、控制动画停止、关闭动画效果、动画频率调整、还可以指定回调函数参与每一个动画的每一步等。jQuery中的动画返回Deferred对象,因此支持Promise异步编程。jQuery默认不能过渡颜色,使用jQuery.Color插件可以解决问题。
触发动画:
CSS一般在页面加载时会自动进行transition和animation,可以在浏览器的查看器(动画窗格)中观察到标签元素上的动画帧并对动画进行控制及设置不同的速度进行预览。使用:hover、:active伪类可以配合鼠标指针触发动画效果。通过js添加删除标签元素的样式类时也会触发相应的动画。jQuery动画的触发和控制由jQuery动画API控制。
动画结束事件/回调:
CSS3动画支持DOM事件:animationstart(动画开始时)、animationend(动画结束时)、animationiteration(动画重复执行时),可以像普通click事件一样使用它们。jQuery动画通过回调函数获取执行完成通知,形如:$(..).animate({css}<, duration><, easing><, callbakc>),因为jQuery动画返回Deferred对象,所以也可以使用.then(success,fail)或.done(function)等方法得到通知。
同时进行多个动画:
在关键帧定义中可以定义多个样式,animation-name也可以指定多个关键帧动画名称。transition-property也可以指定多个样式。jQuery的animate方法中也可以指定多个样式。还可以在同一个标签元素上调多次animate方法(分开调用,而不是链式调用)
顺序进行多个动画:
可以通过animation-delay、transition-delay延迟,安排出顺序执行效果。还可以通过监听动画事件在动画结束后再触发下一个动画。jQuery中animate()的链式调用本身就是顺序执行的。
###requestAnimationFrame: 会与浏览器呈现页面同步配合执行,因此比使用setInterval要更加流畅。requestAnimationFrame是H5新增的方法,与setInterval相比,没有提供频率的控制方法,因为它的频率与页面呈现频率是同步的,通常60次/s,相当于16.66667ms一次。