他们每晚都在网路上北窝，做为前端开发相关人员，中文网站上错综复杂的技术细节变动透过比自己会更高度关注。我始终注意到的两件事是中文网站上的动画电影的反应速度。动画电影对采用者新体验而言是十分好的，有时候他们能许多有意思的动画电影来赢回采用者。
建立高级动画电影听出来是三个极难的热门话题，但坏消息是，在CSS中，能将数个单纯的动画电影互相共振，以建立三个更繁杂的动画电影
在这节课中，他们会自学如下表所示以下几点：
甚么是德帕伦抛物线，和怎样用带队CSS来建立三个 “繁杂”的动画怎样将动画电影互相共振以建立三个高阶动画电影怎样透过应用领域下面教给的三点来建立三个滑梯动画电影甚么是德帕伦抛物线
CSS中的 cubic-bezier 表达式是三个缓动表达式，能让他们全然掌控动画电影在天数上的整体表现。下面是非官方的表述：
德帕伦缓动表达式是一类由五个有理数表述的软化表达式，选定了德帕伦抛物线的三个R210P1和P2，其西北侧P0和P3依次一般而言在（0, 0）和（1, 1）。P1和P2的x座标被管制在[0, 1]范围内。
甚么是缓动表达式？
非线性抛物线
想像三个点P0和P1，当中P0是动画电影的终点，P1是完结点。那时想像另三个点在三点之间非线性移动，如下表所示所示
这就是所谓的非线性抛物线，也是最单纯的动画电影。
二次德帕伦抛物线
如下表所示图所示，有三个点。P0、P1和P2。他们想让动画电影从P0移动到P2。在这种情况下，P1是三个R210，掌控动画电影的抛物线。
二次方德帕伦概念：
在P0和P1之间和P1和P2之间（用灰线表示）连接虚线点Q0沿着P0和P1之间的直线移动。同时，点Q1沿着P1和P2之间的直线移动在Q0和Q1之间连接一条虚线（用绿线表示）在Q0和Q1开始移动的同时，点B开始沿着绿线移动，B点所走的路径就是动画电影路径请注意，Q0、Q1和B不以相同的速度移动。它们都要在同一天数开始，并在同一天数完成它们的路径。因此，每三个点都是根据它所移动的线长以适当的速度移动的。
三次德帕伦抛物线
三次德帕伦抛物线由4个点组成。P0, P1, P2和P3。动画电影开始于P0，完结于P3。P1和P2是他们的R210。
三次贝赛尔的工作原理如下表所示：
在（P0, P1）、（P1, P2）和（P2, P3）之间连接虚线，由灰线表示点Q0、Q1和Q2依次沿直线（P0，P1）、（P1，P2）和（P2，P3）移动在（Q0, Q1）和（Q1, Q2）之间连接虚线，它们由绿线表示。点R0和R1依次沿直线（Q0, Q1）和（Q1, Q2）移动连接R0和R1之间的线（用蓝线表示）最后，B点沿着R0和R1之间的连接线移动，B点所走的路径就是动画电影路径如果你想更好地了解三次体德帕伦的工作原理，建议你看看那个desmos链接。玩玩R210，看看动画电影怎样随天数变动。(注意，链接中的动画电影是由黑线表示的）。
共振动画电影
有很多步骤的大动画电影能被分解成数个小动画电影。在 css 中，透过添加animation-delay属性来实现这一点。计算延迟很单纯，把你要计算动画电影延迟的那个动画电影之前的所有动画电影的天数加出来。
例如：
animation: movePointLeft 4s linear forwards, movePointDown 3s linear forwards;这里，他们有三个动画电影，movePointLeft和movePointDown。movePointLeft的动画电影延迟是零，因为它是他们想先运行的动画电影。movePointDown的动画电影延迟是4秒，因为movePointLeft将在这段天数后完成。
因此，animation-delay属性：
animation-delay: 0s, 4s;注意，如果有三个或更多的动画电影同时开始，它们的动画电影延迟将是一样的。此外，当你计算即将开始的动画电影的延迟时，把它们视为三个动。例如 ：
animation: x 4s linear forwards, y 4s linear forwards, jump 2s linear forwards;假设x和y同时开始。在这种情况下，x和y的动画电影延迟都将为零，而jump 动画电影的延迟将为4秒（而不是8秒！）。
animation-delay: 0s, 0s, 4s;建立滑梯
掌控了下面的知识，是时候应用领域一下了。
了解动画电影
滑梯路径由三部分组成：
滑动部分循环部分还会有许多动画电影，在下面的三个动画电影之间创造水平空间他们将首先建立三个单纯的球，做为他们滑梯的 “车”。
hmtl 部分：
<div id=“the-cart” class=“cart”></div>css 部分：
.cart { background-color: rgb(100, 210, 128); height: 50px; width: 50px; border: 1px solid black; border-radius: 50px; position: absolute; left: 10vw; top: 30vh; }滑动部分
建立小球滑动的部分能用cubic-bezier表达式来完成! 那个动画电影是由2个动画电影组成的，三个是沿x轴的动画电影，另三个是沿y轴的动画电影。X轴动画电影是三个沿X轴的普通非线性动画电影。它的关键帧如下表所示:
@keyframes x { to { left: 40vw; }将其添加到球路径的 animation属性中，如下表所示所示
animation: x 4s linear forwardsy轴动画电影是他们将采用cubic-bezier表达式的部分。首先表述动画电影的关键帧。他们希望起始点和完结点之间的差异很小，以至于球达到的高度几乎相同。
@keyframes y { to { top: 29.99vh; } }}那时让他们来思考一下cubic-bezier表达式。他们希望他们的路径先向右缓慢移动，然后当它滑动时，它应该走得更快。
那时，他们得到了三个cubic-bezier表达式：
cubic-bezier(0.55, 0, 0.2, -800).为动画属性添加关键帧:
animation: x 4s linear forwards, y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards;这是他们动画电影的第一部分，所以动画电影延迟为零。他们应该添加三个animation-delay属性，因为从下面的动画电影开始，动画电影的开始天数将与第三个动画电影不同。
animation-delay: 0s, 0s;地址：https://codepen.io/smashingmag/pen/VwxXBQb
添加水平空间
在做循环之前，球应该沿着X轴移动一小会儿，所以三个动画电影之间有空间。
表述关键帧
@keyframes x2 { to { left: 50vw; } }把它添加到 animation 属性中:
animation: x 4s linear forwards, y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards, x2 0.5s linear forwards;那个动画电影应该在滑动动画电影之后开始，而滑动动画电影需要4秒，因此，动画电影延迟将是4秒。
animation-delay: 0s, 0s, 4s;地址：https://codepen.io/smashingmag/pen/dyemExY
循环部分
要在CSS中建立三个圆（循环），他们需要把圆移到循环的中心，然后从那里开始做动画电影。圆的半径是100px，所以他们把圆的位置改为top: 20vh（30是期望的半径（这里是10vh））。然而，这需要在滑动动画电影完成后发生，所以他们将建立另三个持续天数为0秒的动画电影，并添加三个合适的动画电影延迟。
关键帧:
@keyframes pointOfCircle { to{top: 20vh; } }添加到 animation 动画电影中：
animation: x 4s linear forwards, y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards, x2 0.5s linear forwards, pointOfCircle 0s linear forwards;添加动画电影延迟, 4.5s:
animation-delay: 0s, 0s, 4s, 4.5s;循环本身
建立三个循环动画电影:
建立三个关键帧，将球移回原来的位置，然后旋转球。@keyframes loop { from { transform: rotate(0deg) translateY(10vh) rotate(0deg); } to { transform: rotate(-360deg) translateY(10vh) rotate(360deg); } }添加到 animation 中:
animation: x 4s linear forwards, y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards, x2 0.5s linear forwards, pointOfCircle 0s linear forwards, loop 3s linear forwards;添加动画电影延迟，这里是4.5s:
animation-delay: 0s, 0s, 4s, 4.5s, 4.5s;地址：https://codepen.io/smashingmag/pen/mdLxZdR
添加水平空间
快完成了，最后 只需要在动画电影之后沿着x轴移动球，这样球就不会像上图中那样在循环之后全然停止。
关键帧:
@keyframes x3 { to { left: 70vw; } }添加到 animation 中:
animation: x 4s linear forwards, y 4s cubic-bezier(0.55, 0, 0.2, -800) forwards, x2 0.5s linear forwards, pointOfCircle 0s linear forwards, loop 3s linear forwards, x3 2s linear forwards;加上适当的延迟，这里是7.5s:
animation-delay: 0s, 0s, 4s, 4.5s, 4.5s, 7.5s;地址：https://codepen.io/smashingmag/pen/wvjmLKp
总结
在本节中，他们介绍了怎样结合数个关键帧来建立三个繁杂的动画电影路径。他们还介绍了德帕伦和怎样采用它们来建立你自己的缓动表达式。建议大家自己多多动手，才能更好的掌控 css 动画。
