使用CSS3来实现动画
使用translation来实现，一般用于hover效果中，其语法为：transition: property duration timing-function delay;
hover时，修改CSS的属性，以达到动画目的。
比如：hover时改变X轴方向的位移：
.scrollactive-nav a{
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
padding: 0.5rem 0;
transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.scrollactive-nav a:hover {
padding-left: 0.25rem;
}
使用animation来实现，比如响应用户的单击事件或者滚动事件，在元素被插入或者移除时，添加动画样式。
其animation语法为：animation: name duration timing-function delay iteration-count direction fill-mode play-state。
常规做法会定义起始(0%)和结束(100%)的关键帧，待动画执行完成后，元素会保持它原来的状态（如果定义animation-fill-mode可能会影响该状态）
实现从底部弹层动画效果
方法一：react可以使用条件表达式、Vue可使用v-if/v-show等触发条件，然后定义动画，当元素被插入或移除时，按规则执行动画。
方法二：可以绑定一个class，当active状态下，执行动画。
{/* React 从底部弹出 通过绑定一个active样式实现效果 activeModal为true时，执行动画*/}
<ModalBootom>
<div className={ activeModal ? "modal-bottom-box active" : "modal-bottom-box" }>
<div className="modal-mask-demo"></div>
<div className="modal-content">
<div className="modal-prod-box">
{/* //内容区域 */}
</div>
</div>
</div>
</ModalBootom>
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slideInDown {
0% {
transform: translateY(-100%);
visibility: visible;
}
100% {
transform: translateY(0);
}
}
.modal-mask-demo {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 99;
visibility: hidden;
}
.active .modal-mask-demo {
visibility: visible;
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: both;
}
.modal-content {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
height: 125px;
background-color: aliceblue;
z-index: 100;
visibility: hidden;
}
.active .modal-content {
visibility: visible;
animation: slideUpDown 0.5s;
animation-timing-function: linear;
}
对于Vue来说，实现动画可以使用Transition组件，定义进入和离开的动画即可，也可结合相关的钩子函数，实现更为复杂的效果，相当强大。
v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。
v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。
比如实现下面这个效果：
<Transition name="slide-fade">
<p v-if="show">hello</p>
</Transition>
/*
进入和离开动画可以使用不同
持续时间和速度曲线。
*/
.slide-fade-enter-active {
transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateX(20px);
opacity: 0;
}
使用定时器来实现动画
使用setTimeout：比如在小度农庄中浇水除草的动作，就是多次使用setTimeout，替换两张图片来实现的，因为间隔很短，所以在视觉上看着是连续的。
使用setInterval：比如每隔几十毫秒更新某个元素位置，直到满足条件后停止或移除元素。
相比较而言，setInterval更耗费性能，尤其是涉及到属性计算，并且会频繁操作dom，所以在使用时，一定要主要这个问题。（可以在看不到的页面，停止动画效果，看到时恢复动画效果）
使用window.requestAnimationFrame 来实现
浏览器会在下次重绘之前调用指定的回调函数更新动画。该函数接受一个timestamp参数。
requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。
在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量。
requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。
使用场景也很多，比如：弹幕、一些粒子效果、放烟花等等（可能需要结合canvas）但是也比较耗费性能。
举例requestAnimationFrame的用法：
<div id="some-element-you-want-to-animate"
style="width: 100px;height: 100px;background-color: aqua;position: relative;"></div>
const element = document.getElementById('some-element-you-want-to-animate');
let start, previousTimeStamp;
let done = false
function step(timestamp) {
if (start === undefined) {
start = timestamp;
}
const elapsed = timestamp - start;
if (previousTimeStamp !== timestamp) {
// 这里使用 `Math.min()` 确保元素刚好停在 200px 的位置。
const count = Math.min(0.1 * elapsed, 200);
element.style.transform = 'translateX(' + count + 'px)';
if (count === 200) done = true;
}
if (elapsed < 2000) { // 在两秒后停止动画
previousTimeStamp = timestamp;
if (!done) {
window.requestAnimationFrame(step);
}
}
}
window.requestAnimationFrame(step);
