缓动函数速查表
保存成HTML运行：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>缓动函数速查表</title> <meta content="width=device-width" name="viewport"> <meta content="通过正确地使用的缓动函数，让动画变得更加真实。" name="description"> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <meta content="缓动函数允许指定动画在执行时的进度，使其看起来更加真实。现实物体照着一定速率移动，并不是一开始就移动得很快。本页可以在每次你需要时，帮助你找到想要的缓动函数。" property="og:description"> <style> *{margin:0;padding:0}body{background:white;color:black;font-size:16px}body,pre strong{font-family:"PT Sans", sans-serif}code{font-family:"PT Mono", monospace;font-size:14px}a{outline:none}.centered{width:899px;max-width:96%;margin:0 auto;position:relative}.about{padding:20px 164px 5px 0;line-height:1.3}.about p{margin-bottom:5px}.easings{margin:0 -30px 0 -10px;position:relative}.easings ul{display:inline-block;margin-right:20px}.easings .part{position:relative}.easings .part ul{-webkit-transition:opacity 400ms;transition:opacity 400ms}.easings .part-title{position:absolute;top:-12px;right:35px;width:40px;color:#999;font-size:14px;font-weight:normal;text-align:right}.easings.hightlight-part .part ul{opacity:0.15}.easings.hightlight-part .part:hover ul{opacity:1}.easing{list-style:none;display:inline-block;margin:3px 5px;padding:5px;position:relative}.easing.linear{position:absolute;top:11px;right:25px;z-index:2}.easing.linear .easing-title{margin-bottom:-35px}.easing.easeOutElastic .easing-title{box-shadow:white 0 26px 8px -8px inset}.easing .button{margin:-5px;padding:5px}.easing .easing-title{text-align:center;font-size:15px;font-weight:normal;margin-bottom:-25px;position:relative;z-index:2}.easing .graph{text-decoration:none;position:relative}.easing.is-clickable:hover,.easing.is-clickable:active{background:#f0f0f0;box-shadow:inset 0 0 5px rgba(0,0,0,0.5)}.easing.is-clickable:hover .button,.easing.is-clickable:active .button{background:white;-webkit-transition:-webkit-transform 200ms, box-shadow 200ms;transition:transform 200ms, box-shadow 200ms}.easing.is-clickable:active .button{box-shadow:0 0 2px rgba(0,0,0,0.3);-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9);-webkit-transition:none;transition:none}.graph svg{width:124px;height:140px;margin-bottom:-30px}.graph svg line{stroke:#bbb;stroke-width:1px}.graph svg path{fill:transparent;fill:rgba(255,255,255,0);stroke:black;stroke-width:2px}.graph svg text{font-size:12px;fill:#bbb}.graph{position:relative;display:inline-block}.graph .example{position:absolute;width:21px;height:12px;overflow:hidden;z-index:10;background:#e40000;background:-webkit-linear-gradient(#fe0000, #d00000);background:linear-gradient(#fe0000, #d00000)}.graph .example .top,.graph .example .bottom{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);background:white;position:absolute;left:-11px;width:15px;height:15px}.graph .example .top{top:-8px}.graph .example .bottom{top:5px}.graph .dot{position:absolute;background:#ddd;width:2px;height:2px;border-radius:2px}.easing .graph .example,.easing .graph .dot{opacity:0;-webkit-transition:opacity 200ms;transition:opacity 200ms}.easing .graph .example{top:94px;left:122px}.easing .graph .dot{top:99px;left:1px}.easing:hover .graph .example,.easing:hover .graph .dot{opacity:1}.easing:hover.is-tapped .example,.easing:hover.is-tapped .dot{opacity:0}.easing .link{-webkit-tap-highlight-color:rgba(255,255,255,0)}.howtos h2{font-weight:normal;font-size:25px;padding:17px 0 5px 0}.howtos h3{font-size:25px}.easing-description .back{float:right;margin-top:19px;color:red;text-decoration:none}.easing-description .back .text{display:inline-block;margin-left:5px;border-bottom:1px dotted}.easing-description .back:hover .text{border-bottom-style:solid}.easing-description .back:active{-webkit-transform:translateY(2px);-ms-transform:translateY(2px);transform:translateY(2px)}.easing-description h2{font-weight:normal;font-size:25px;margin-top:15px}.easing-description h3{font-size:22px}.easing-description .graph{margin:-20px 0 -10px 0}.easing-description .graph .example{top:124px;left:161.2px}.easing-description .graph .dot{width:4px;height:4px;border-radius:2px;top:128px;left:2px}.easing-description .graph .example,.easing-description .graph .dot{opacity:0;-webkit-transition:opacity 200ms;transition:opacity 200ms}.easing-description .graph svg{width:161.2px;height:182px}.easing-description.exampled .graph .example,.easing-description.exampled .graph .dot{opacity:1}.howtos p,.easing-description p{padding-bottom:5px}.howtos p a,.easing-description p a{display:inline-block;color:black;text-decoration:none;border-bottom:1px solid #bbb;line-height:1;-webkit-transition:border-bottom-color 150ms;transition:border-bottom-color 150ms}.howtos p a:hover,.easing-description p a:hover{border-bottom-color:black}.howtos pre,.easing-description pre{padding:5px 0 10px 0;font-size:13px}.howtos pre strong,.easing-description pre strong{color:red;font-size:14px;font-weight:normal;white-space:nowrap}.howtos h3,.easing-description h3{font-weight:normal;padding:7px 0 5px 0}.page-crop{overflow:hidden;margin:-10px 0 0 -10px;padding:10px 0 0 10px}.easing-description{position:absolute;top:0;left:105%;width:100%;display:none}.page-slider{position:relative}.page-animation .page-slider,.page-animation .easing.linear{-webkit-transition:all 600ms cubic-bezier(0.77, 0, 0.175, 1);transition:all 600ms cubic-bezier(0.77, 0, 0.175, 1)}.easing-page .page-slider{-webkit-transform:translateX(-105%);-ms-transform:translateX(-105%);transform:translateX(-105%)}.easing-page .easing.linear{-webkit-transform:translateY(-105px);-ms-transform:translateY(-105px);transform:translateY(-105px)}.open-source{position:absolute;width:80px;height:80px;top:0;right:0;text-decoration:none}.open-source .crop{display:block;position:absolute;top:0;left:-10px;width:90px;height:90px;overflow:hidden;-webkit-tap-highlight-color:rgba(255,255,255,0)}.open-source:active .background{background:#ddd}.open-source .background,.open-source .corner{position:absolute;top:-65px;left:32px;width:120px;height:120px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.open-source .background{background:#e8e8e8;box-shadow:inset 0 -7px 7px -7px rgba(0,0,0,0.5)}.open-source .source{position:absolute;color:black;text-shadow:white 0 1px 0;left:40px;line-height:1.1}.open-source .source code{font-size:10px}.open-source .source-crop{position:absolute;width:120px;height:120px;background:white;top:22px;left:-50px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.open-source .octocat{position:absolute;width:33px;height:19px;background-size:100% 100%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);top:24px;left:43px;box-shadow:inset 0 -5px 5px -5px rgba(0,0,0,0.4)}.open-source .corner{position:absolute;overflow:hidden;left:21px;top:-66px}.open-source .title{position:absolute;top:82px;left:23px;width:82px;height:80px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);background:white;box-shadow:0 0 3px rgba(0,0,0,0.5)}.open-source .border,.open-source .text{position:absolute;bottom:0;width:100%}.open-source .border{border-top:1px dashed #999;opacity:1}.open-source .text{bottom:4px;text-align:center;font-size:12px;color:#666;padding-left:5px;opacity:1}.open-source .rotator{position:absolute;width:80px;height:80px;top:0;left:10px;z-index:3}.open-source.show .rotator{left:12px;top:-2px}.open-source .translate{position:absolute;right:0;top:90px;text-align:center;font-size:13px;opacity:0;padding:0 3px;background:white;box-shadow:0 0 6px white;z-index:3;-webkit-transition:opacity 400ms;transition:opacity 400ms}.open-source .translate a{color:black;text-decoration:none}.open-source.show .text,.open-source.show .border{opacity:0}.open-source.show .translate{opacity:1}.open-source.tappable .translate a{text-decoration:underline}.transform-3d .open-source .rotator{-webkit-transition:all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);transition:all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955)}.transform-3d .open-source .shadow{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.1);opacity:0}.transform-3d .open-source .text,.transform-3d .open-source .border{-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-delay:250ms;transition-delay:250ms}.transform-3d .open-source .translate{-webkit-transition-delay:0;transition-delay:0}.transform-3d .open-source.show .translate{-webkit-transition-delay:400ms;transition-delay:400ms}.transform-3d .open-source.show .text,.transform-3d .open-source.show .border{-webkit-transition-delay:200ms;transition-delay:200ms}.transform-3d .open-source.show .rotator{-webkit-transform:rotate3d(1, 1, 0, 180deg);transform:rotate3d(1, 1, 0, 180deg)}.transform-2d .open-source.show .text,.transform-2d .open-source.show .border{display:none}.transform-2d .open-source.show .rotator{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}html{position:relative;min-height:100%}body{margin-bottom:50px}footer{position:absolute;left:0;bottom:0;height:50px;width:100%}footer{text-align:right;padding-top:10px;height:40px}footer a{line-height:40px;color:#888}footer a:hover{text-decoration:none}footer .author{float:left;padding-left:27px;font-size:13px;position:relative;-webkit-transition:color 400ms;transition:color 400ms}footer .author:hover{text-decoration:none;color:black}footer .author:hover .hover{top:0}footer .mask{position:absolute;top:9px;left:0;overflow:hidden;background-color:#888}footer .hover{position:absolute;background:black;width:100%;height:100%;top:-100%;-webkit-transition:top 400ms cubic-bezier(0.77, 0, 0.175, 1);transition:top 400ms cubic-bezier(0.77, 0, 0.175, 1)}footer .image{width:20px;height:22px;background-size:100% 100%;position:relative;z-index:2}footer .star{display:none;opacity:0}footer .star.is-enable{display:block;float:left;margin:9px 0 0 30px}footer .star.is-show{opacity:1;-webkit-transition:opacity 400ms;transition:opacity 400ms}footer li{font-size:12px;font-family:"Trebuchet MS", sans-serif;list-style:none;display:inline-block;padding-left:10px}footer select{position:relative;top:9px}@media (min-width: 1150px){.open-source.user-can-translate .translate{-webkit-transition-delay:0;transition-delay:0;opacity:0.5}.open-source.user-can-translate.show .translate{opacity:1}}@media all and (max-height: 768px){.about{padding-top:15px}.easing.linear{top:6px}}@media all and (max-width: 899px){.easings{text-align:center}.easings .part-title{position:static;top:auto;left:auto;width:auto;text-align:center;font-size:12px;margin:-3px 0 -1px 0}}@media all and (max-width: 600px){.centered{width:auto;max-width:100%;padding:0 10px}.about{padding-top:10px}.easing{margin:3px 0}.easing .easing-title{font-size:13px}.easing .graph .example,.easing .graph .dot{display:none}pre{white-space:pre-wrap}.open-source{display:none}footer .author{font-size:12px}}@media all and (max-width: 481px){.about{padding:10px 0 5px 0}.easing.linear{display:none}.easings{margin:0}.easings ul{margin-right:0}.easings .easing{left:-2px}.howtos{padding:0 10px}.graph svg{width:105.4px;height:119px}.howtos h2{font-size:23px}.howtos h3{font-size:23px}.page-crop{margin:0 -10px;padding:0}.easing-description{margin-top:-10px;padding:0 10px;box-sizing:border-box}.easing-description .back{font-size:14px}.easing-description h2{font-size:23px}.easing-description h3{font-size:20px}}@media all and (max-width: 430px){footer .star.is-show{display:none}}@media all and (max-width: 332px){.graph svg{width:93px;height:105px}} </style> </head> <body><div class="centered"><div class="about"><p><strong>缓动函数</strong>指定动画效果在执行时的速度，使其看起来更加真实。</p><p>现实物体照着一定节奏移动，并不是一开始就移动很快的。当我们打开抽屉时，首先会让它加速，然后慢下来。当某个东西往下掉时，首先是越掉越快，撞到地上后回弹，最终才又碰触地板。</p><p>本页可以在每次你需要时，帮助你找到想要的缓动函数。</p><div class="easing linear"><h3 class="easing-title">linear</h3><div class="graph"><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,59.4 2.4,58.8 3.6,58.2 4.8,57.6 6.0,57.0 7.2,56.4 8.4,55.8 9.6,55.2 10.8,54.6 12.0,54.0 13.2,53.4 14.4,52.8 15.6,52.2 16.8,51.6 18.0,51.0 19.2,50.4 20.4,49.8 21.6,49.2 22.8,48.6 24.0,48.0 25.2,47.4 26.4,46.8 27.6,46.2 28.8,45.6 30.0,45.0 31.2,44.4 32.4,43.8 33.6,43.2 34.8,42.6 36.0,42.0 37.2,41.4 38.4,40.8 39.6,40.2 40.8,39.6 42.0,39.0 43.2,38.4 44.4,37.8 45.6,37.2 46.8,36.6 48.0,36.0 49.2,35.4 50.4,34.8 51.6,34.2 52.8,33.6 54.0,33.0 55.2,32.4 56.4,31.8 57.6,31.2 58.8,30.6 60.0,30.0 61.2,29.4 62.4,28.8 63.6,28.2 64.8,27.6 66.0,27.0 67.2,26.4 68.4,25.8 69.6,25.2 70.8,24.6 72.0,24.0 73.2,23.4 74.4,22.8 75.6,22.2 76.8,21.6 78.0,21.0 79.2,20.4 80.4,19.8 81.6,19.2 82.8,18.6 84.0,18.0 85.2,17.4 86.4,16.8 87.6,16.2 88.8,15.6 90.0,15.0 91.2,14.4 92.4,13.8 93.6,13.2 94.8,12.6 96.0,12.0 97.2,11.4 98.4,10.8 99.6,10.2 100.8,9.6 102.0,9.0 103.2,8.4 104.4,7.8 105.6,7.2 106.8,6.6 108.0,6.0 109.2,5.4 110.4,4.8 111.6,4.2 112.8,3.6 114.0,3.0 115.2,2.4 116.4,1.8 117.6,1.2 118.8,0.6 120.0,0.0"></path></svg></div></div></div><div class="page-crop"><div class="page-slider"><div class="easings"><div class="part css"><h2 class="part-title" title="可放在任意位置">css+js</h2><ul><li class="easing is-clickable easeInSine"><div class="button"><h3 class="easing-title">easeInSine</h3><a class="graph link" href="#easeInSine"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,59.9 4.8,59.9 6.0,59.8 7.2,59.7 8.4,59.6 9.6,59.5 10.8,59.4 12.0,59.3 13.2,59.1 14.4,58.9 15.6,58.8 16.8,58.6 18.0,58.3 19.2,58.1 20.4,57.9 21.6,57.6 22.8,57.3 24.0,57.1 25.2,56.8 26.4,56.5 27.6,56.1 28.8,55.8 30.0,55.4 31.2,55.1 32.4,54.7 33.6,54.3 34.8,53.9 36.0,53.5 37.2,53.0 38.4,52.6 39.6,52.1 40.8,51.6 42.0,51.2 43.2,50.7 44.4,50.1 45.6,49.6 46.8,49.1 48.0,48.5 49.2,48.0 50.4,47.4 51.6,46.8 52.8,46.2 54.0,45.6 55.2,45.0 56.4,44.4 57.6,43.7 58.8,43.1 60.0,42.4 61.2,41.8 62.4,41.1 63.6,40.4 64.8,39.7 66.0,39.0 67.2,38.2 68.4,37.5 69.6,36.8 70.8,36.0 72.0,35.3 73.2,34.5 74.4,33.7 75.6,32.9 76.8,32.1 78.0,31.3 79.2,30.5 80.4,29.7 81.6,28.9 82.8,28.1 84.0,27.2 85.2,26.4 86.4,25.5 87.6,24.7 88.8,23.8 90.0,23.0 91.2,22.1 92.4,21.2 93.6,20.3 94.8,19.4 96.0,18.5 97.2,17.6 98.4,16.7 99.6,15.8 100.8,14.9 102.0,14.0 103.2,13.1 104.4,12.2 105.6,11.2 106.8,10.3 108.0,9.4 109.2,8.5 110.4,7.5 111.6,6.6 112.8,5.6 114.0,4.7 115.2,3.8 116.4,2.8 117.6,1.9 118.8,0.9 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeOutSine"><div class="button"><h3 class="easing-title">easeOutSine</h3><a class="graph link" href="#easeOutSine"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,59.1 2.4,58.1 3.6,57.2 4.8,56.2 6.0,55.3 7.2,54.4 8.4,53.4 9.6,52.5 10.8,51.5 12.0,50.6 13.2,49.7 14.4,48.8 15.6,47.8 16.8,46.9 18.0,46.0 19.2,45.1 20.4,44.2 21.6,43.3 22.8,42.4 24.0,41.5 25.2,40.6 26.4,39.7 27.6,38.8 28.8,37.9 30.0,37.0 31.2,36.2 32.4,35.3 33.6,34.5 34.8,33.6 36.0,32.8 37.2,31.9 38.4,31.1 39.6,30.3 40.8,29.5 42.0,28.7 43.2,27.9 44.4,27.1 45.6,26.3 46.8,25.5 48.0,24.7 49.2,24.0 50.4,23.2 51.6,22.5 52.8,21.8 54.0,21.0 55.2,20.3 56.4,19.6 57.6,18.9 58.8,18.2 60.0,17.6 61.2,16.9 62.4,16.3 63.6,15.6 64.8,15.0 66.0,14.4 67.2,13.8 68.4,13.2 69.6,12.6 70.8,12.0 72.0,11.5 73.2,10.9 74.4,10.4 75.6,9.9 76.8,9.3 78.0,8.8 79.2,8.4 80.4,7.9 81.6,7.4 82.8,7.0 84.0,6.5 85.2,6.1 86.4,5.7 87.6,5.3 88.8,4.9 90.0,4.6 91.2,4.2 92.4,3.9 93.6,3.5 94.8,3.2 96.0,2.9 97.2,2.7 98.4,2.4 99.6,2.1 100.8,1.9 102.0,1.7 103.2,1.4 104.4,1.2 105.6,1.1 106.8,0.9 108.0,0.7 109.2,0.6 110.4,0.5 111.6,0.4 112.8,0.3 114.0,0.2 115.2,0.1 116.4,0.1 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeInOutSine"><div class="button"><h3 class="easing-title">easeInOutSine</h3><a class="graph link" href="#easeInOutSine"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,59.9 3.6,59.9 4.8,59.8 6.0,59.6 7.2,59.5 8.4,59.3 9.6,59.1 10.8,58.8 12.0,58.5 13.2,58.2 14.4,57.9 15.6,57.5 16.8,57.1 18.0,56.7 19.2,56.3 20.4,55.8 21.6,55.3 22.8,54.8 24.0,54.3 25.2,53.7 26.4,53.1 27.6,52.5 28.8,51.9 30.0,51.2 31.2,50.5 32.4,49.8 33.6,49.1 34.8,48.4 36.0,47.6 37.2,46.9 38.4,46.1 39.6,45.3 40.8,44.5 42.0,43.6 43.2,42.8 44.4,41.9 45.6,41.0 46.8,40.2 48.0,39.3 49.2,38.4 50.4,37.5 51.6,36.5 52.8,35.6 54.0,34.7 55.2,33.8 56.4,32.8 57.6,31.9 58.8,30.9 60.0,30.0 61.2,29.1 62.4,28.1 63.6,27.2 64.8,26.2 66.0,25.3 67.2,24.4 68.4,23.5 69.6,22.5 70.8,21.6 72.0,20.7 73.2,19.8 74.4,19.0 75.6,18.1 76.8,17.2 78.0,16.4 79.2,15.5 80.4,14.7 81.6,13.9 82.8,13.1 84.0,12.4 85.2,11.6 86.4,10.9 87.6,10.2 88.8,9.5 90.0,8.8 91.2,8.1 92.4,7.5 93.6,6.9 94.8,6.3 96.0,5.7 97.2,5.2 98.4,4.7 99.6,4.2 100.8,3.7 102.0,3.3 103.2,2.9 104.4,2.5 105.6,2.1 106.8,1.8 108.0,1.5 109.2,1.2 110.4,0.9 111.6,0.7 112.8,0.5 114.0,0.4 115.2,0.2 116.4,0.1 117.6,0.1 118.8,0.0 120.0,0.0"></path></svg></a></div></li></ul><ul><li class="easing is-clickable easeInQuad"><div class="button"><h3 class="easing-title">easeInQuad</h3><a class="graph link" href="#easeInQuad"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,59.9 4.8,59.9 6.0,59.9 7.2,59.8 8.4,59.7 9.6,59.6 10.8,59.5 12.0,59.4 13.2,59.3 14.4,59.1 15.6,59.0 16.8,58.8 18.0,58.7 19.2,58.5 20.4,58.3 21.6,58.1 22.8,57.8 24.0,57.6 25.2,57.4 26.4,57.1 27.6,56.8 28.8,56.5 30.0,56.3 31.2,55.9 32.4,55.6 33.6,55.3 34.8,55.0 36.0,54.6 37.2,54.2 38.4,53.9 39.6,53.5 40.8,53.1 42.0,52.7 43.2,52.2 44.4,51.8 45.6,51.3 46.8,50.9 48.0,50.4 49.2,49.9 50.4,49.4 51.6,48.9 52.8,48.4 54.0,47.9 55.2,47.3 56.4,46.7 57.6,46.2 58.8,45.6 60.0,45.0 61.2,44.4 62.4,43.8 63.6,43.1 64.8,42.5 66.0,41.8 67.2,41.2 68.4,40.5 69.6,39.8 70.8,39.1 72.0,38.4 73.2,37.7 74.4,36.9 75.6,36.2 76.8,35.4 78.0,34.7 79.2,33.9 80.4,33.1 81.6,32.3 82.8,31.4 84.0,30.6 85.2,29.8 86.4,28.9 87.6,28.0 88.8,27.1 90.0,26.3 91.2,25.3 92.4,24.4 93.6,23.5 94.8,22.6 96.0,21.6 97.2,20.6 98.4,19.7 99.6,18.7 100.8,17.7 102.0,16.7 103.2,15.6 104.4,14.6 105.6,13.5 106.8,12.5 108.0,11.4 109.2,10.3 110.4,9.2 111.6,8.1 112.8,7.0 114.0,5.9 115.2,4.7 116.4,3.5 117.6,2.4 118.8,1.2 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeOutQuad"><div class="button"><h3 class="easing-title">easeOutQuad</h3><a class="graph link" href="#easeOutQuad"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,58.8 2.4,57.6 3.6,56.5 4.8,55.3 6.0,54.2 7.2,53.0 8.4,51.9 9.6,50.8 10.8,49.7 12.0,48.6 13.2,47.5 14.4,46.5 15.6,45.4 16.8,44.4 18.0,43.3 19.2,42.3 20.4,41.3 21.6,40.3 22.8,39.4 24.0,38.4 25.2,37.4 26.4,36.5 27.6,35.6 28.8,34.7 30.0,33.8 31.2,32.9 32.4,32.0 33.6,31.1 34.8,30.2 36.0,29.4 37.2,28.6 38.4,27.7 39.6,26.9 40.8,26.1 42.0,25.4 43.2,24.6 44.4,23.8 45.6,23.1 46.8,22.3 48.0,21.6 49.2,20.9 50.4,20.2 51.6,19.5 52.8,18.8 54.0,18.2 55.2,17.5 56.4,16.9 57.6,16.2 58.8,15.6 60.0,15.0 61.2,14.4 62.4,13.8 63.6,13.3 64.8,12.7 66.0,12.1 67.2,11.6 68.4,11.1 69.6,10.6 70.8,10.1 72.0,9.6 73.2,9.1 74.4,8.7 75.6,8.2 76.8,7.8 78.0,7.3 79.2,6.9 80.4,6.5 81.6,6.1 82.8,5.8 84.0,5.4 85.2,5.0 86.4,4.7 87.6,4.4 88.8,4.1 90.0,3.8 91.2,3.5 92.4,3.2 93.6,2.9 94.8,2.6 96.0,2.4 97.2,2.2 98.4,1.9 99.6,1.7 100.8,1.5 102.0,1.4 103.2,1.2 104.4,1.0 105.6,0.9 106.8,0.7 108.0,0.6 109.2,0.5 110.4,0.4 111.6,0.3 112.8,0.2 114.0,0.2 115.2,0.1 116.4,0.1 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeInOutQuad"><div class="button"><h3 class="easing-title">easeInOutQuad</h3><a class="graph link" href="#easeInOutQuad"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,59.9 4.8,59.8 6.0,59.7 7.2,59.6 8.4,59.4 9.6,59.2 10.8,59.0 12.0,58.8 13.2,58.5 14.4,58.3 15.6,58.0 16.8,57.6 18.0,57.3 19.2,56.9 20.4,56.5 21.6,56.1 22.8,55.7 24.0,55.2 25.2,54.7 26.4,54.2 27.6,53.7 28.8,53.1 30.0,52.5 31.2,51.9 32.4,51.3 33.6,50.6 34.8,49.9 36.0,49.2 37.2,48.5 38.4,47.7 39.6,46.9 40.8,46.1 42.0,45.3 43.2,44.4 44.4,43.6 45.6,42.7 46.8,41.7 48.0,40.8 49.2,39.8 50.4,38.8 51.6,37.8 52.8,36.8 54.0,35.7 55.2,34.6 56.4,33.5 57.6,32.4 58.8,31.2 60.0,30.0 61.2,28.8 62.4,27.6 63.6,26.5 64.8,25.4 66.0,24.3 67.2,23.2 68.4,22.2 69.6,21.2 70.8,20.2 72.0,19.2 73.2,18.3 74.4,17.3 75.6,16.4 76.8,15.6 78.0,14.7 79.2,13.9 80.4,13.1 81.6,12.3 82.8,11.5 84.0,10.8 85.2,10.1 86.4,9.4 87.6,8.7 88.8,8.1 90.0,7.5 91.2,6.9 92.4,6.3 93.6,5.8 94.8,5.3 96.0,4.8 97.2,4.3 98.4,3.9 99.6,3.5 100.8,3.1 102.0,2.7 103.2,2.4 104.4,2.0 105.6,1.7 106.8,1.5 108.0,1.2 109.2,1.0 110.4,0.8 111.6,0.6 112.8,0.4 114.0,0.3 115.2,0.2 116.4,0.1 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></a></div></li></ul><ul><li class="easing is-clickable easeInCubic"><div class="button"><h3 class="easing-title">easeInCubic</h3><a class="graph link" href="#easeInCubic"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,59.9 13.2,59.9 14.4,59.9 15.6,59.9 16.8,59.8 18.0,59.8 19.2,59.8 20.4,59.7 21.6,59.7 22.8,59.6 24.0,59.5 25.2,59.4 26.4,59.4 27.6,59.3 28.8,59.2 30.0,59.1 31.2,58.9 32.4,58.8 33.6,58.7 34.8,58.5 36.0,58.4 37.2,58.2 38.4,58.0 39.6,57.8 40.8,57.6 42.0,57.4 43.2,57.2 44.4,57.0 45.6,56.7 46.8,56.4 48.0,56.2 49.2,55.9 50.4,55.6 51.6,55.2 52.8,54.9 54.0,54.5 55.2,54.2 56.4,53.8 57.6,53.4 58.8,52.9 60.0,52.5 61.2,52.0 62.4,51.6 63.6,51.1 64.8,50.6 66.0,50.0 67.2,49.5 68.4,48.9 69.6,48.3 70.8,47.7 72.0,47.0 73.2,46.4 74.4,45.7 75.6,45.0 76.8,44.3 78.0,43.5 79.2,42.8 80.4,42.0 81.6,41.1 82.8,40.3 84.0,39.4 85.2,38.5 86.4,37.6 87.6,36.7 88.8,35.7 90.0,34.7 91.2,33.7 92.4,32.6 93.6,31.5 94.8,30.4 96.0,29.3 97.2,28.1 98.4,26.9 99.6,25.7 100.8,24.4 102.0,23.2 103.2,21.8 104.4,20.5 105.6,19.1 106.8,17.7 108.0,16.3 109.2,14.8 110.4,13.3 111.6,11.7 112.8,10.2 114.0,8.6 115.2,6.9 116.4,5.2 117.6,3.5 118.8,1.8 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeOutCubic"><div class="button"><h3 class="easing-title">easeOutCubic</h3><a class="graph link" href="#easeOutCubic"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,58.2 2.4,56.5 3.6,54.8 4.8,53.1 6.0,51.4 7.2,49.8 8.4,48.3 9.6,46.7 10.8,45.2 12.0,43.7 13.2,42.3 14.4,40.9 15.6,39.5 16.8,38.2 18.0,36.8 19.2,35.6 20.4,34.3 21.6,33.1 22.8,31.9 24.0,30.7 25.2,29.6 26.4,28.5 27.6,27.4 28.8,26.3 30.0,25.3 31.2,24.3 32.4,23.3 33.6,22.4 34.8,21.5 36.0,20.6 37.2,19.7 38.4,18.9 39.6,18.0 40.8,17.2 42.0,16.5 43.2,15.7 44.4,15.0 45.6,14.3 46.8,13.6 48.0,13.0 49.2,12.3 50.4,11.7 51.6,11.1 52.8,10.5 54.0,10.0 55.2,9.4 56.4,8.9 57.6,8.4 58.8,8.0 60.0,7.5 61.2,7.1 62.4,6.6 63.6,6.2 64.8,5.8 66.0,5.5 67.2,5.1 68.4,4.8 69.6,4.4 70.8,4.1 72.0,3.8 73.2,3.6 74.4,3.3 75.6,3.0 76.8,2.8 78.0,2.6 79.2,2.4 80.4,2.2 81.6,2.0 82.8,1.8 84.0,1.6 85.2,1.5 86.4,1.3 87.6,1.2 88.8,1.1 90.0,0.9 91.2,0.8 92.4,0.7 93.6,0.6 94.8,0.6 96.0,0.5 97.2,0.4 98.4,0.3 99.6,0.3 100.8,0.2 102.0,0.2 103.2,0.2 104.4,0.1 105.6,0.1 106.8,0.1 108.0,0.1 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeInOutCubic"><div class="button"><h3 class="easing-title">easeInOutCubic</h3><a class="graph link" href="#easeInOutCubic"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,59.9 8.4,59.9 9.6,59.9 10.8,59.8 12.0,59.8 13.2,59.7 14.4,59.6 15.6,59.5 16.8,59.3 18.0,59.2 19.2,59.0 20.4,58.8 21.6,58.6 22.8,58.4 24.0,58.1 25.2,57.8 26.4,57.4 27.6,57.1 28.8,56.7 30.0,56.3 31.2,55.8 32.4,55.3 33.6,54.7 34.8,54.1 36.0,53.5 37.2,52.9 38.4,52.1 39.6,51.4 40.8,50.6 42.0,49.7 43.2,48.8 44.4,47.8 45.6,46.8 46.8,45.8 48.0,44.6 49.2,43.5 50.4,42.2 51.6,40.9 52.8,39.6 54.0,38.1 55.2,36.6 56.4,35.1 57.6,33.5 58.8,31.8 60.0,30.0 61.2,28.2 62.4,26.5 63.6,24.9 64.8,23.4 66.0,21.9 67.2,20.4 68.4,19.1 69.6,17.8 70.8,16.5 72.0,15.4 73.2,14.2 74.4,13.2 75.6,12.2 76.8,11.2 78.0,10.3 79.2,9.4 80.4,8.6 81.6,7.9 82.8,7.1 84.0,6.5 85.2,5.9 86.4,5.3 87.6,4.7 88.8,4.2 90.0,3.8 91.2,3.3 92.4,2.9 93.6,2.6 94.8,2.2 96.0,1.9 97.2,1.6 98.4,1.4 99.6,1.2 100.8,1.0 102.0,0.8 103.2,0.7 104.4,0.5 105.6,0.4 106.8,0.3 108.0,0.2 109.2,0.2 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></a></div></li></ul><ul><li class="easing is-clickable easeInQuart"><div class="button"><h3 class="easing-title">easeInQuart</h3><a class="graph link" href="#easeInQuart"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,60.0 13.2,60.0 14.4,60.0 15.6,60.0 16.8,60.0 18.0,60.0 19.2,60.0 20.4,59.9 21.6,59.9 22.8,59.9 24.0,59.9 25.2,59.9 26.4,59.9 27.6,59.8 28.8,59.8 30.0,59.8 31.2,59.7 32.4,59.7 33.6,59.6 34.8,59.6 36.0,59.5 37.2,59.4 38.4,59.4 39.6,59.3 40.8,59.2 42.0,59.1 43.2,59.0 44.4,58.9 45.6,58.7 46.8,58.6 48.0,58.5 49.2,58.3 50.4,58.1 51.6,57.9 52.8,57.8 54.0,57.5 55.2,57.3 56.4,57.1 57.6,56.8 58.8,56.5 60.0,56.3 61.2,55.9 62.4,55.6 63.6,55.3 64.8,54.9 66.0,54.5 67.2,54.1 68.4,53.7 69.6,53.2 70.8,52.7 72.0,52.2 73.2,51.7 74.4,51.1 75.6,50.5 76.8,49.9 78.0,49.3 79.2,48.6 80.4,47.9 81.6,47.2 82.8,46.4 84.0,45.6 85.2,44.8 86.4,43.9 87.6,43.0 88.8,42.0 90.0,41.0 91.2,40.0 92.4,38.9 93.6,37.8 94.8,36.6 96.0,35.4 97.2,34.2 98.4,32.9 99.6,31.5 100.8,30.1 102.0,28.7 103.2,27.2 104.4,25.6 105.6,24.0 106.8,22.4 108.0,20.6 109.2,18.9 110.4,17.0 111.6,15.1 112.8,13.2 114.0,11.1 115.2,9.0 116.4,6.9 117.6,4.7 118.8,2.4 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeOutQuart"><div class="button"><h3 class="easing-title">easeOutQuart</h3><a class="graph link" href="#easeOutQuart"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,57.6 2.4,55.3 3.6,53.1 4.8,51.0 6.0,48.9 7.2,46.8 8.4,44.9 9.6,43.0 10.8,41.1 12.0,39.4 13.2,37.6 14.4,36.0 15.6,34.4 16.8,32.8 18.0,31.3 19.2,29.9 20.4,28.5 21.6,27.1 22.8,25.8 24.0,24.6 25.2,23.4 26.4,22.2 27.6,21.1 28.8,20.0 30.0,19.0 31.2,18.0 32.4,17.0 33.6,16.1 34.8,15.2 36.0,14.4 37.2,13.6 38.4,12.8 39.6,12.1 40.8,11.4 42.0,10.7 43.2,10.1 44.4,9.5 45.6,8.9 46.8,8.3 48.0,7.8 49.2,7.3 50.4,6.8 51.6,6.3 52.8,5.9 54.0,5.5 55.2,5.1 56.4,4.7 57.6,4.4 58.8,4.1 60.0,3.8 61.2,3.5 62.4,3.2 63.6,2.9 64.8,2.7 66.0,2.5 67.2,2.2 68.4,2.1 69.6,1.9 70.8,1.7 72.0,1.5 73.2,1.4 74.4,1.3 75.6,1.1 76.8,1.0 78.0,0.9 79.2,0.8 80.4,0.7 81.6,0.6 82.8,0.6 84.0,0.5 85.2,0.4 86.4,0.4 87.6,0.3 88.8,0.3 90.0,0.2 91.2,0.2 92.4,0.2 93.6,0.1 94.8,0.1 96.0,0.1 97.2,0.1 98.4,0.1 99.6,0.1 100.8,0.0 102.0,0.0 103.2,0.0 104.4,0.0 105.6,0.0 106.8,0.0 108.0,0.0 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeInOutQuart"><div class="button"><h3 class="easing-title">easeInOutQuart</h3><a class="graph link" href="#easeInOutQuart"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,60.0 13.2,59.9 14.4,59.9 15.6,59.9 16.8,59.8 18.0,59.8 19.2,59.7 20.4,59.6 21.6,59.5 22.8,59.4 24.0,59.2 25.2,59.1 26.4,58.9 27.6,58.7 28.8,58.4 30.0,58.1 31.2,57.8 32.4,57.4 33.6,57.0 34.8,56.6 36.0,56.1 37.2,55.6 38.4,55.0 39.6,54.3 40.8,53.6 42.0,52.8 43.2,51.9 44.4,51.0 45.6,50.0 46.8,48.9 48.0,47.7 49.2,46.4 50.4,45.1 51.6,43.6 52.8,42.0 54.0,40.3 55.2,38.5 56.4,36.6 57.6,34.5 58.8,32.3 60.0,30.0 61.2,27.7 62.4,25.5 63.6,23.4 64.8,21.5 66.0,19.7 67.2,18.0 68.4,16.4 69.6,14.9 70.8,13.6 72.0,12.3 73.2,11.1 74.4,10.0 75.6,9.0 76.8,8.1 78.0,7.2 79.2,6.4 80.4,5.7 81.6,5.0 82.8,4.4 84.0,3.9 85.2,3.4 86.4,3.0 87.6,2.6 88.8,2.2 90.0,1.9 91.2,1.6 92.4,1.3 93.6,1.1 94.8,0.9 96.0,0.8 97.2,0.6 98.4,0.5 99.6,0.4 100.8,0.3 102.0,0.2 103.2,0.2 104.4,0.1 105.6,0.1 106.8,0.1 108.0,0.0 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></a></div></li></ul><ul><li class="easing is-clickable easeInQuint"><div class="button"><h3 class="easing-title">easeInQuint</h3><a class="graph link" href="#easeInQuint"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,60.0 13.2,60.0 14.4,60.0 15.6,60.0 16.8,60.0 18.0,60.0 19.2,60.0 20.4,60.0 21.6,60.0 22.8,60.0 24.0,60.0 25.2,60.0 26.4,60.0 27.6,60.0 28.8,60.0 30.0,59.9 31.2,59.9 32.4,59.9 33.6,59.9 34.8,59.9 36.0,59.9 37.2,59.8 38.4,59.8 39.6,59.8 40.8,59.7 42.0,59.7 43.2,59.6 44.4,59.6 45.6,59.5 46.8,59.5 48.0,59.4 49.2,59.3 50.4,59.2 51.6,59.1 52.8,59.0 54.0,58.9 55.2,58.8 56.4,58.6 57.6,58.5 58.8,58.3 60.0,58.1 61.2,57.9 62.4,57.7 63.6,57.5 64.8,57.2 66.0,57.0 67.2,56.7 68.4,56.4 69.6,56.1 70.8,55.7 72.0,55.3 73.2,54.9 74.4,54.5 75.6,54.0 76.8,53.6 78.0,53.0 79.2,52.5 80.4,51.9 81.6,51.3 82.8,50.6 84.0,49.9 85.2,49.2 86.4,48.4 87.6,47.6 88.8,46.7 90.0,45.8 91.2,44.8 92.4,43.8 93.6,42.7 94.8,41.5 96.0,40.3 97.2,39.1 98.4,37.8 99.6,36.4 100.8,34.9 102.0,33.4 103.2,31.8 104.4,30.1 105.6,28.3 106.8,26.5 108.0,24.6 109.2,22.6 110.4,20.5 111.6,18.3 112.8,16.0 114.0,13.6 115.2,11.1 116.4,8.5 117.6,5.8 118.8,2.9 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeOutQuint"><div class="button"><h3 class="easing-title">easeOutQuint</h3><a class="graph link" href="#easeOutQuint"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,57.1 2.4,54.2 3.6,51.5 4.8,48.9 6.0,46.4 7.2,44.0 8.4,41.7 9.6,39.5 10.8,37.4 12.0,35.4 13.2,33.5 14.4,31.7 15.6,29.9 16.8,28.2 18.0,26.6 19.2,25.1 20.4,23.6 21.6,22.2 22.8,20.9 24.0,19.7 25.2,18.5 26.4,17.3 27.6,16.2 28.8,15.2 30.0,14.2 31.2,13.3 32.4,12.4 33.6,11.6 34.8,10.8 36.0,10.1 37.2,9.4 38.4,8.7 39.6,8.1 40.8,7.5 42.0,7.0 43.2,6.4 44.4,6.0 45.6,5.5 46.8,5.1 48.0,4.7 49.2,4.3 50.4,3.9 51.6,3.6 52.8,3.3 54.0,3.0 55.2,2.8 56.4,2.5 57.6,2.3 58.8,2.1 60.0,1.9 61.2,1.7 62.4,1.5 63.6,1.4 64.8,1.2 66.0,1.1 67.2,1.0 68.4,0.9 69.6,0.8 70.8,0.7 72.0,0.6 73.2,0.5 74.4,0.5 75.6,0.4 76.8,0.4 78.0,0.3 79.2,0.3 80.4,0.2 81.6,0.2 82.8,0.2 84.0,0.1 85.2,0.1 86.4,0.1 87.6,0.1 88.8,0.1 90.0,0.1 91.2,0.0 92.4,0.0 93.6,0.0 94.8,0.0 96.0,0.0 97.2,0.0 98.4,0.0 99.6,0.0 100.8,0.0 102.0,0.0 103.2,0.0 104.4,0.0 105.6,0.0 106.8,0.0 108.0,0.0 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeInOutQuint"><div class="button"><h3 class="easing-title">easeInOutQuint</h3><a class="graph link" href="#easeInOutQuint"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,60.0 13.2,60.0 14.4,60.0 15.6,60.0 16.8,59.9 18.0,59.9 19.2,59.9 20.4,59.9 21.6,59.8 22.8,59.8 24.0,59.7 25.2,59.6 26.4,59.5 27.6,59.4 28.8,59.2 30.0,59.1 31.2,58.9 32.4,58.6 33.6,58.3 34.8,58.0 36.0,57.7 37.2,57.3 38.4,56.8 39.6,56.2 40.8,55.6 42.0,55.0 43.2,54.2 44.4,53.3 45.6,52.4 46.8,51.3 48.0,50.2 49.2,48.9 50.4,47.5 51.6,45.9 52.8,44.2 54.0,42.3 55.2,40.2 56.4,38.0 57.6,35.5 58.8,32.9 60.0,30.0 61.2,27.1 62.4,24.5 63.6,22.0 64.8,19.8 66.0,17.7 67.2,15.8 68.4,14.1 69.6,12.5 70.8,11.1 72.0,9.8 73.2,8.7 74.4,7.6 75.6,6.7 76.8,5.8 78.0,5.0 79.2,4.4 80.4,3.8 81.6,3.2 82.8,2.7 84.0,2.3 85.2,2.0 86.4,1.7 87.6,1.4 88.8,1.1 90.0,0.9 91.2,0.8 92.4,0.6 93.6,0.5 94.8,0.4 96.0,0.3 97.2,0.2 98.4,0.2 99.6,0.1 100.8,0.1 102.0,0.1 103.2,0.1 104.4,0.0 105.6,0.0 106.8,0.0 108.0,0.0 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></a></div></li></ul><ul><li class="easing is-clickable easeInExpo"><div class="button"><h3 class="easing-title">easeInExpo</h3><a class="graph link" href="#easeInExpo"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,59.9 2.4,59.9 3.6,59.9 4.8,59.9 6.0,59.9 7.2,59.9 8.4,59.9 9.6,59.9 10.8,59.9 12.0,59.9 13.2,59.9 14.4,59.9 15.6,59.9 16.8,59.8 18.0,59.8 19.2,59.8 20.4,59.8 21.6,59.8 22.8,59.8 24.0,59.8 25.2,59.7 26.4,59.7 27.6,59.7 28.8,59.7 30.0,59.7 31.2,59.6 32.4,59.6 33.6,59.6 34.8,59.6 36.0,59.5 37.2,59.5 38.4,59.5 39.6,59.4 40.8,59.4 42.0,59.3 43.2,59.3 44.4,59.2 45.6,59.2 46.8,59.1 48.0,59.1 49.2,59.0 50.4,58.9 51.6,58.8 52.8,58.8 54.0,58.7 55.2,58.6 56.4,58.5 57.6,58.4 58.8,58.3 60.0,58.1 61.2,58.0 62.4,57.8 63.6,57.7 64.8,57.5 66.0,57.3 67.2,57.2 68.4,57.0 69.6,56.7 70.8,56.5 72.0,56.3 73.2,56.0 74.4,55.7 75.6,55.4 76.8,55.1 78.0,54.7 79.2,54.3 80.4,53.9 81.6,53.5 82.8,53.0 84.0,52.5 85.2,52.0 86.4,51.4 87.6,50.8 88.8,50.1 90.0,49.4 91.2,48.6 92.4,47.8 93.6,46.9 94.8,46.0 96.0,45.0 97.2,43.9 98.4,42.8 99.6,41.5 100.8,40.2 102.0,38.8 103.2,37.3 104.4,35.6 105.6,33.9 106.8,32.0 108.0,30.0 109.2,27.8 110.4,25.5 111.6,23.1 112.8,20.4 114.0,17.6 115.2,14.5 116.4,11.3 117.6,7.8 118.8,4.0 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeOutExpo"><div class="button"><h3 class="easing-title">easeOutExpo</h3><a class="graph link" href="#easeOutExpo"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,56.0 2.4,52.2 3.6,48.7 4.8,45.5 6.0,42.4 7.2,39.6 8.4,36.9 9.6,34.5 10.8,32.2 12.0,30.0 13.2,28.0 14.4,26.1 15.6,24.4 16.8,22.7 18.0,21.2 19.2,19.8 20.4,18.5 21.6,17.2 22.8,16.1 24.0,15.0 25.2,14.0 26.4,13.1 27.6,12.2 28.8,11.4 30.0,10.6 31.2,9.9 32.4,9.2 33.6,8.6 34.8,8.0 36.0,7.5 37.2,7.0 38.4,6.5 39.6,6.1 40.8,5.7 42.0,5.3 43.2,4.9 44.4,4.6 45.6,4.3 46.8,4.0 48.0,3.8 49.2,3.5 50.4,3.3 51.6,3.0 52.8,2.8 54.0,2.7 55.2,2.5 56.4,2.3 57.6,2.2 58.8,2.0 60.0,1.9 61.2,1.7 62.4,1.6 63.6,1.5 64.8,1.4 66.0,1.3 67.2,1.2 68.4,1.2 69.6,1.1 70.8,1.0 72.0,0.9 73.2,0.9 74.4,0.8 75.6,0.8 76.8,0.7 78.0,0.7 79.2,0.6 80.4,0.6 81.6,0.5 82.8,0.5 84.0,0.5 85.2,0.4 86.4,0.4 87.6,0.4 88.8,0.4 90.0,0.3 91.2,0.3 92.4,0.3 93.6,0.3 94.8,0.3 96.0,0.2 97.2,0.2 98.4,0.2 99.6,0.2 100.8,0.2 102.0,0.2 103.2,0.2 104.4,0.1 105.6,0.1 106.8,0.1 108.0,0.1 109.2,0.1 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.1 115.2,0.1 116.4,0.1 117.6,0.1 118.8,0.1 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeInOutExpo"><div class="button"><h3 class="easing-title">easeInOutExpo</h3><a class="graph link" href="#easeInOutExpo"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,59.9 6.0,59.9 7.2,59.9 8.4,59.9 9.6,59.9 10.8,59.9 12.0,59.9 13.2,59.9 14.4,59.8 15.6,59.8 16.8,59.8 18.0,59.8 19.2,59.7 20.4,59.7 21.6,59.6 22.8,59.6 24.0,59.5 25.2,59.5 26.4,59.4 27.6,59.3 28.8,59.2 30.0,59.1 31.2,58.9 32.4,58.8 33.6,58.6 34.8,58.4 36.0,58.1 37.2,57.8 38.4,57.5 39.6,57.2 40.8,56.7 42.0,56.3 43.2,55.7 44.4,55.1 45.6,54.3 46.8,53.5 48.0,52.5 49.2,51.4 50.4,50.1 51.6,48.6 52.8,46.9 54.0,45.0 55.2,42.8 56.4,40.2 57.6,37.3 58.8,33.9 60.0,30.0 61.2,26.1 62.4,22.7 63.6,19.8 64.8,17.2 66.0,15.0 67.2,13.1 68.4,11.4 69.6,9.9 70.8,8.6 72.0,7.5 73.2,6.5 74.4,5.7 75.6,4.9 76.8,4.3 78.0,3.8 79.2,3.3 80.4,2.8 81.6,2.5 82.8,2.2 84.0,1.9 85.2,1.6 86.4,1.4 87.6,1.2 88.8,1.1 90.0,0.9 91.2,0.8 92.4,0.7 93.6,0.6 94.8,0.5 96.0,0.5 97.2,0.4 98.4,0.4 99.6,0.3 100.8,0.3 102.0,0.2 103.2,0.2 104.4,0.2 105.6,0.2 106.8,0.1 108.0,0.1 109.2,0.1 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.1 115.2,0.1 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></a></div></li></ul><ul><li class="easing is-clickable easeInCirc"><div class="button"><h3 class="easing-title">easeInCirc</h3><a class="graph link" href="#easeInCirc"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,59.9 7.2,59.9 8.4,59.9 9.6,59.8 10.8,59.8 12.0,59.7 13.2,59.6 14.4,59.6 15.6,59.5 16.8,59.4 18.0,59.3 19.2,59.2 20.4,59.1 21.6,59.0 22.8,58.9 24.0,58.8 25.2,58.7 26.4,58.5 27.6,58.4 28.8,58.2 30.0,58.1 31.2,57.9 32.4,57.8 33.6,57.6 34.8,57.4 36.0,57.2 37.2,57.0 38.4,56.8 39.6,56.6 40.8,56.4 42.0,56.2 43.2,56.0 44.4,55.7 45.6,55.5 46.8,55.2 48.0,55.0 49.2,54.7 50.4,54.5 51.6,54.2 52.8,53.9 54.0,53.6 55.2,53.3 56.4,53.0 57.6,52.6 58.8,52.3 60.0,52.0 61.2,51.6 62.4,51.2 63.6,50.9 64.8,50.5 66.0,50.1 67.2,49.7 68.4,49.3 69.6,48.9 70.8,48.4 72.0,48.0 73.2,47.5 74.4,47.1 75.6,46.6 76.8,46.1 78.0,45.6 79.2,45.1 80.4,44.5 81.6,44.0 82.8,43.4 84.0,42.8 85.2,42.3 86.4,41.6 87.6,41.0 88.8,40.4 90.0,39.7 91.2,39.0 92.4,38.3 93.6,37.5 94.8,36.8 96.0,36.0 97.2,35.2 98.4,34.3 99.6,33.5 100.8,32.6 102.0,31.6 103.2,30.6 104.4,29.6 105.6,28.5 106.8,27.4 108.0,26.2 109.2,24.9 110.4,23.5 111.6,22.1 112.8,20.5 114.0,18.7 115.2,16.8 116.4,14.6 117.6,11.9 118.8,8.5 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeOutCirc"><div class="button"><h3 class="easing-title">easeOutCirc</h3><a class="graph link" href="#easeOutCirc"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,51.5 2.4,48.1 3.6,45.4 4.8,43.2 6.0,41.3 7.2,39.5 8.4,37.9 9.6,36.5 10.8,35.1 12.0,33.8 13.2,32.6 14.4,31.5 15.6,30.4 16.8,29.4 18.0,28.4 19.2,27.4 20.4,26.5 21.6,25.7 22.8,24.8 24.0,24.0 25.2,23.2 26.4,22.5 27.6,21.7 28.8,21.0 30.0,20.3 31.2,19.6 32.4,19.0 33.6,18.4 34.8,17.7 36.0,17.2 37.2,16.6 38.4,16.0 39.6,15.5 40.8,14.9 42.0,14.4 43.2,13.9 44.4,13.4 45.6,12.9 46.8,12.5 48.0,12.0 49.2,11.6 50.4,11.1 51.6,10.7 52.8,10.3 54.0,9.9 55.2,9.5 56.4,9.1 57.6,8.8 58.8,8.4 60.0,8.0 61.2,7.7 62.4,7.4 63.6,7.0 64.8,6.7 66.0,6.4 67.2,6.1 68.4,5.8 69.6,5.5 70.8,5.3 72.0,5.0 73.2,4.8 74.4,4.5 75.6,4.3 76.8,4.0 78.0,3.8 79.2,3.6 80.4,3.4 81.6,3.2 82.8,3.0 84.0,2.8 85.2,2.6 86.4,2.4 87.6,2.2 88.8,2.1 90.0,1.9 91.2,1.8 92.4,1.6 93.6,1.5 94.8,1.3 96.0,1.2 97.2,1.1 98.4,1.0 99.6,0.9 100.8,0.8 102.0,0.7 103.2,0.6 104.4,0.5 105.6,0.4 106.8,0.4 108.0,0.3 109.2,0.2 110.4,0.2 111.6,0.1 112.8,0.1 114.0,0.1 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeInOutCirc"><div class="button"><h3 class="easing-title">easeInOutCirc</h3><a class="graph link" href="#easeInOutCirc"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,59.9 4.8,59.9 6.0,59.8 7.2,59.8 8.4,59.7 9.6,59.6 10.8,59.5 12.0,59.4 13.2,59.3 14.4,59.1 15.6,59.0 16.8,58.8 18.0,58.6 19.2,58.4 20.4,58.2 21.6,58.0 22.8,57.7 24.0,57.5 25.2,57.2 26.4,56.9 27.6,56.6 28.8,56.3 30.0,56.0 31.2,55.6 32.4,55.2 33.6,54.9 34.8,54.4 36.0,54.0 37.2,53.5 38.4,53.1 39.6,52.5 40.8,52.0 42.0,51.4 43.2,50.8 44.4,50.2 45.6,49.5 46.8,48.8 48.0,48.0 49.2,47.2 50.4,46.3 51.6,45.3 52.8,44.2 54.0,43.1 55.2,41.8 56.4,40.2 57.6,38.4 58.8,36.0 60.0,30.0 61.2,24.0 62.4,21.6 63.6,19.8 64.8,18.2 66.0,16.9 67.2,15.8 68.4,14.7 69.6,13.7 70.8,12.8 72.0,12.0 73.2,11.2 74.4,10.5 75.6,9.8 76.8,9.2 78.0,8.6 79.2,8.0 80.4,7.5 81.6,6.9 82.8,6.5 84.0,6.0 85.2,5.6 86.4,5.1 87.6,4.8 88.8,4.4 90.0,4.0 91.2,3.7 92.4,3.4 93.6,3.1 94.8,2.8 96.0,2.5 97.2,2.3 98.4,2.0 99.6,1.8 100.8,1.6 102.0,1.4 103.2,1.2 104.4,1.0 105.6,0.9 106.8,0.7 108.0,0.6 109.2,0.5 110.4,0.4 111.6,0.3 112.8,0.2 114.0,0.2 115.2,0.1 116.4,0.1 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></a></div></li></ul><ul><li class="easing is-clickable easeInBack"><div class="button"><h3 class="easing-title">easeInBack</h3><a class="graph link" href="#easeInBack"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.1 4.8,60.2 6.0,60.2 7.2,60.3 8.4,60.4 9.6,60.6 10.8,60.7 12.0,60.9 13.2,61.0 14.4,61.2 15.6,61.4 16.8,61.6 18.0,61.8 19.2,61.9 20.4,62.2 21.6,62.4 22.8,62.6 24.0,62.8 25.2,63.0 26.4,63.2 27.6,63.4 28.8,63.6 30.0,63.8 31.2,64.1 32.4,64.3 33.6,64.4 34.8,64.6 36.0,64.8 37.2,65.0 38.4,65.1 39.6,65.3 40.8,65.4 42.0,65.6 43.2,65.7 44.4,65.8 45.6,65.8 46.8,65.9 48.0,66.0 49.2,66.0 50.4,66.0 51.6,66.0 52.8,66.0 54.0,65.9 55.2,65.8 56.4,65.7 57.6,65.6 58.8,65.4 60.0,65.3 61.2,65.1 62.4,64.8 63.6,64.5 64.8,64.2 66.0,63.9 67.2,63.6 68.4,63.2 69.6,62.7 70.8,62.2 72.0,61.7 73.2,61.2 74.4,60.6 75.6,60.0 76.8,59.3 78.0,58.6 79.2,57.9 80.4,57.1 81.6,56.2 82.8,55.4 84.0,54.4 85.2,53.5 86.4,52.4 87.6,51.3 88.8,50.2 90.0,49.0 91.2,47.8 92.4,46.5 93.6,45.2 94.8,43.8 96.0,42.3 97.2,40.8 98.4,39.3 99.6,37.6 100.8,36.0 102.0,34.2 103.2,32.4 104.4,30.5 105.6,28.6 106.8,26.6 108.0,24.5 109.2,22.4 110.4,20.2 111.6,17.9 112.8,15.6 114.0,13.2 115.2,10.7 116.4,8.1 117.6,5.5 118.8,2.8 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeOutBack"><div class="button"><h3 class="easing-title">easeOutBack</h3><a class="graph link" href="#easeOutBack"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,57.2 2.4,54.5 3.6,51.9 4.8,49.3 6.0,46.8 7.2,44.4 8.4,42.1 9.6,39.8 10.8,37.6 12.0,35.5 13.2,33.4 14.4,31.4 15.6,29.5 16.8,27.6 18.0,25.8 19.2,24.0 20.4,22.4 21.6,20.7 22.8,19.2 24.0,17.7 25.2,16.2 26.4,14.8 27.6,13.5 28.8,12.2 30.0,11.0 31.2,9.8 32.4,8.7 33.6,7.6 34.8,6.5 36.0,5.6 37.2,4.6 38.4,3.8 39.6,2.9 40.8,2.1 42.0,1.4 43.2,0.7 44.4,0.0 45.6,-0.6 46.8,-1.2 48.0,-1.7 49.2,-2.2 50.4,-2.7 51.6,-3.2 52.8,-3.6 54.0,-3.9 55.2,-4.2 56.4,-4.5 57.6,-4.8 58.8,-5.1 60.0,-5.3 61.2,-5.4 62.4,-5.6 63.6,-5.7 64.8,-5.8 66.0,-5.9 67.2,-6.0 68.4,-6.0 69.6,-6.0 70.8,-6.0 72.0,-6.0 73.2,-5.9 74.4,-5.8 75.6,-5.8 76.8,-5.7 78.0,-5.6 79.2,-5.4 80.4,-5.3 81.6,-5.1 82.8,-5.0 84.0,-4.8 85.2,-4.6 86.4,-4.4 87.6,-4.3 88.8,-4.1 90.0,-3.8 91.2,-3.6 92.4,-3.4 93.6,-3.2 94.8,-3.0 96.0,-2.8 97.2,-2.6 98.4,-2.4 99.6,-2.2 100.8,-1.9 102.0,-1.8 103.2,-1.6 104.4,-1.4 105.6,-1.2 106.8,-1.0 108.0,-0.9 109.2,-0.7 110.4,-0.6 111.6,-0.4 112.8,-0.3 114.0,-0.2 115.2,-0.2 116.4,-0.1 117.6,-0.0 118.8,-0.0 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeInOutBack"><div class="button"><h3 class="easing-title">easeInOutBack</h3><a class="graph link" href="#easeInOutBack"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,60.1 3.6,60.3 4.8,60.4 6.0,60.7 7.2,60.9 8.4,61.2 9.6,61.6 10.8,61.9 12.0,62.3 13.2,62.6 14.4,63.0 15.6,63.4 16.8,63.7 18.0,64.1 19.2,64.4 20.4,64.8 21.6,65.1 22.8,65.3 24.0,65.6 25.2,65.7 26.4,65.9 27.6,66.0 28.8,66.0 30.0,66.0 31.2,65.9 32.4,65.7 33.6,65.5 34.8,65.1 36.0,64.7 37.2,64.2 38.4,63.6 39.6,62.9 40.8,62.1 42.0,61.2 43.2,60.1 44.4,58.9 45.6,57.6 46.8,56.2 48.0,54.6 49.2,52.9 50.4,51.0 51.6,49.0 52.8,46.8 54.0,44.4 55.2,41.9 56.4,39.2 57.6,36.3 58.8,33.3 60.0,30.0 61.2,26.7 62.4,23.7 63.6,20.8 64.8,18.1 66.0,15.6 67.2,13.2 68.4,11.0 69.6,9.0 70.8,7.1 72.0,5.4 73.2,3.8 74.4,2.4 75.6,1.1 76.8,-0.1 78.0,-1.2 79.2,-2.1 80.4,-2.9 81.6,-3.6 82.8,-4.2 84.0,-4.7 85.2,-5.1 86.4,-5.5 87.6,-5.7 88.8,-5.9 90.0,-6.0 91.2,-6.0 92.4,-6.0 93.6,-5.9 94.8,-5.7 96.0,-5.6 97.2,-5.3 98.4,-5.1 99.6,-4.8 100.8,-4.4 102.0,-4.1 103.2,-3.7 104.4,-3.4 105.6,-3.0 106.8,-2.6 108.0,-2.3 109.2,-1.9 110.4,-1.6 111.6,-1.2 112.8,-0.9 114.0,-0.7 115.2,-0.4 116.4,-0.3 117.6,-0.1 118.8,-0.0 120.0,0.0"></path></svg></a></div></li></ul></div><div class="part js"><h2 class="part-title" title="只能在JavaScript中被使用">js</h2><ul><li class="easing is-clickable easeInElastic"><div class="button"><h3 class="easing-title">easeInElastic</h3><a class="graph link" href="#easeInElastic"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,59.9 8.4,59.9 9.6,59.9 10.8,59.9 12.0,59.9 13.2,59.9 14.4,59.9 15.6,59.9 16.8,59.9 18.0,59.9 19.2,59.9 20.4,60.0 21.6,60.0 22.8,60.1 24.0,60.1 25.2,60.2 26.4,60.2 27.6,60.3 28.8,60.3 30.0,60.3 31.2,60.3 32.4,60.3 33.6,60.3 34.8,60.3 36.0,60.2 37.2,60.2 38.4,60.1 39.6,59.9 40.8,59.8 42.0,59.7 43.2,59.5 44.4,59.4 45.6,59.3 46.8,59.1 48.0,59.1 49.2,59.0 50.4,59.0 51.6,59.1 52.8,59.2 54.0,59.3 55.2,59.6 56.4,59.8 57.6,60.2 58.8,60.5 60.0,60.9 61.2,61.3 62.4,61.7 63.6,62.1 64.8,62.4 66.0,62.7 67.2,62.8 68.4,62.8 69.6,62.6 70.8,62.3 72.0,61.9 73.2,61.2 74.4,60.5 75.6,59.5 76.8,58.5 78.0,57.3 79.2,56.2 80.4,55.1 81.6,54.0 82.8,53.2 84.0,52.5 85.2,52.1 86.4,52.1 87.6,52.5 88.8,53.4 90.0,54.7 91.2,56.5 92.4,58.7 93.6,61.4 94.8,64.3 96.0,67.5 97.2,70.8 98.4,73.9 99.6,76.9 100.8,79.4 102.0,81.2 103.2,82.2 104.4,82.3 105.6,81.1 106.8,78.7 108.0,75.0 109.2,69.9 110.4,63.6 111.6,56.1 112.8,47.8 114.0,38.8 115.2,29.6 116.4,20.6 117.6,12.3 118.8,5.2 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeOutElastic"><div class="button"><h3 class="easing-title">easeOutElastic</h3><a class="graph link" href="#easeOutElastic"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,54.8 2.4,47.7 3.6,39.4 4.8,30.4 6.0,21.2 7.2,12.2 8.4,3.9 9.6,-3.6 10.8,-9.9 12.0,-15.0 13.2,-18.7 14.4,-21.1 15.6,-22.3 16.8,-22.2 18.0,-21.2 19.2,-19.4 20.4,-16.9 21.6,-13.9 22.8,-10.8 24.0,-7.5 25.2,-4.3 26.4,-1.4 27.6,1.3 28.8,3.5 30.0,5.3 31.2,6.6 32.4,7.5 33.6,7.9 34.8,7.9 36.0,7.5 37.2,6.8 38.4,6.0 39.6,4.9 40.8,3.8 42.0,2.7 43.2,1.5 44.4,0.5 45.6,-0.5 46.8,-1.2 48.0,-1.9 49.2,-2.3 50.4,-2.6 51.6,-2.8 52.8,-2.8 54.0,-2.7 55.2,-2.4 56.4,-2.1 57.6,-1.7 58.8,-1.3 60.0,-0.9 61.2,-0.5 62.4,-0.2 63.6,0.2 64.8,0.4 66.0,0.7 67.2,0.8 68.4,0.9 69.6,1.0 70.8,1.0 72.0,0.9 73.2,0.9 74.4,0.7 75.6,0.6 76.8,0.5 78.0,0.3 79.2,0.2 80.4,0.1 81.6,-0.1 82.8,-0.2 84.0,-0.2 85.2,-0.3 86.4,-0.3 87.6,-0.3 88.8,-0.3 90.0,-0.3 91.2,-0.3 92.4,-0.3 93.6,-0.2 94.8,-0.2 96.0,-0.1 97.2,-0.1 98.4,-0.0 99.6,0.0 100.8,0.1 102.0,0.1 103.2,0.1 104.4,0.1 105.6,0.1 106.8,0.1 108.0,0.1 109.2,0.1 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.0 115.2,0.0 116.4,0.0 117.6,-0.0 118.8,-0.0 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeInOutElastic"><div class="button"><h3 class="easing-title">easeInOutElastic</h3><a class="graph link" href="#easeInOutElastic"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,59.9 7.2,59.9 8.4,59.9 9.6,59.9 10.8,60.0 12.0,60.0 13.2,60.0 14.4,60.1 15.6,60.1 16.8,60.2 18.0,60.2 19.2,60.3 20.4,60.3 21.6,60.3 22.8,60.3 24.0,60.2 25.2,60.1 26.4,60.0 27.6,59.8 28.8,59.5 30.0,59.3 31.2,59.0 32.4,58.8 33.6,58.6 34.8,58.5 36.0,58.6 37.2,58.8 38.4,59.2 39.6,59.9 40.8,60.8 42.0,61.9 43.2,63.1 44.4,64.4 45.6,65.6 46.8,66.5 48.0,67.0 49.2,67.0 50.4,66.1 51.6,64.3 52.8,61.4 54.0,57.4 55.2,52.4 56.4,46.8 57.6,40.7 58.8,34.9 60.0,30.0 61.2,25.1 62.4,19.3 63.6,13.2 64.8,7.6 66.0,2.6 67.2,-1.4 68.4,-4.3 69.6,-6.1 70.8,-7.0 72.0,-7.0 73.2,-6.5 74.4,-5.6 75.6,-4.4 76.8,-3.1 78.0,-1.9 79.2,-0.8 80.4,0.1 81.6,0.8 82.8,1.2 84.0,1.4 85.2,1.5 86.4,1.4 87.6,1.2 88.8,1.0 90.0,0.7 91.2,0.5 92.4,0.2 93.6,0.0 94.8,-0.1 96.0,-0.2 97.2,-0.3 98.4,-0.3 99.6,-0.3 100.8,-0.3 102.0,-0.2 103.2,-0.2 104.4,-0.1 105.6,-0.1 106.8,-0.0 108.0,0.0 109.2,0.0 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.1 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></a></div></li></ul><ul><li class="easing is-clickable easeInBounce"><div class="button"><h3 class="easing-title">easeInBounce</h3><a class="graph link" href="#easeInBounce"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,59.6 2.4,59.4 3.6,59.2 4.8,59.1 6.0,59.1 7.2,59.2 8.4,59.3 9.6,59.6 10.8,60.0 12.0,59.3 13.2,58.6 14.4,58.0 15.6,57.5 16.8,57.0 18.0,56.7 19.2,56.5 20.4,56.3 21.6,56.3 22.8,56.3 24.0,56.4 25.2,56.6 26.4,56.9 27.6,57.3 28.8,57.8 30.0,58.4 31.2,59.0 32.4,59.8 33.6,58.8 34.8,57.3 36.0,55.8 37.2,54.5 38.4,53.2 39.6,52.0 40.8,51.0 42.0,50.0 43.2,49.1 44.4,48.2 45.6,47.5 46.8,46.9 48.0,46.3 49.2,45.9 50.4,45.5 51.6,45.3 52.8,45.1 54.0,45.0 55.2,45.0 56.4,45.1 57.6,45.3 58.8,45.6 60.0,45.9 61.2,46.4 62.4,46.9 63.6,47.6 64.8,48.3 66.0,49.1 67.2,50.0 68.4,51.0 69.6,52.1 70.8,53.3 72.0,54.6 73.2,56.0 74.4,57.4 75.6,59.0 76.8,58.8 78.0,55.6 79.2,52.5 80.4,49.4 81.6,46.5 82.8,43.6 84.0,40.8 85.2,38.2 86.4,35.6 87.6,33.1 88.8,30.7 90.0,28.4 91.2,26.1 92.4,24.0 93.6,22.0 94.8,20.0 96.0,18.1 97.2,16.4 98.4,14.7 99.6,13.1 100.8,11.6 102.0,10.2 103.2,8.9 104.4,7.7 105.6,6.5 106.8,5.5 108.0,4.5 109.2,3.7 110.4,2.9 111.6,2.2 112.8,1.6 114.0,1.1 115.2,0.7 116.4,0.4 117.6,0.2 118.8,0.0 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeOutBounce"><div class="button"><h3 class="easing-title">easeOutBounce</h3><a class="graph link" href="#easeOutBounce"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,60.0 2.4,59.8 3.6,59.6 4.8,59.3 6.0,58.9 7.2,58.4 8.4,57.8 9.6,57.1 10.8,56.3 12.0,55.5 13.2,54.5 14.4,53.5 15.6,52.3 16.8,51.1 18.0,49.8 19.2,48.4 20.4,46.9 21.6,45.3 22.8,43.6 24.0,41.8 25.2,40.0 26.4,38.0 27.6,36.0 28.8,33.9 30.0,31.6 31.2,29.3 32.4,26.9 33.6,24.4 34.8,21.8 36.0,19.2 37.2,16.4 38.4,13.5 39.6,10.6 40.8,7.5 42.0,4.4 43.2,1.2 44.4,1.0 45.6,2.6 46.8,4.0 48.0,5.4 49.2,6.7 50.4,7.9 51.6,9.0 52.8,10.0 54.0,10.9 55.2,11.7 56.4,12.4 57.6,13.1 58.8,13.6 60.0,14.1 61.2,14.4 62.4,14.7 63.6,14.9 64.8,15.0 66.0,15.0 67.2,14.9 68.4,14.7 69.6,14.5 70.8,14.1 72.0,13.7 73.2,13.1 74.4,12.5 75.6,11.8 76.8,10.9 78.0,10.0 79.2,9.0 80.4,8.0 81.6,6.8 82.8,5.5 84.0,4.2 85.2,2.7 86.4,1.2 87.6,0.2 88.8,1.0 90.0,1.6 91.2,2.2 92.4,2.7 93.6,3.1 94.8,3.4 96.0,3.6 97.2,3.7 98.4,3.7 99.6,3.7 100.8,3.5 102.0,3.3 103.2,3.0 104.4,2.5 105.6,2.0 106.8,1.4 108.0,0.7 109.2,0.0 110.4,0.4 111.6,0.7 112.8,0.8 114.0,0.9 115.2,0.9 116.4,0.8 117.6,0.6 118.8,0.4 120.0,0.0"></path></svg></a></div></li><li class="easing is-clickable easeInOutBounce"><div class="button"><h3 class="easing-title">easeInOutBounce</h3><a class="graph link" href="#easeInOutBounce"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="120" y1="0" y2="0"></line><line x1="0" x2="120" y1="60" y2="60"></line><path d="M0,60 L1.2,59.7 2.4,59.5 3.6,59.6 4.8,59.8 6.0,59.6 7.2,59.0 8.4,58.5 9.6,58.2 10.8,58.1 12.0,58.2 13.2,58.5 14.4,58.9 15.6,59.5 16.8,59.4 18.0,57.9 19.2,56.6 20.4,55.5 21.6,54.5 22.8,53.8 24.0,53.2 25.2,52.8 26.4,52.5 27.6,52.5 28.8,52.6 30.0,53.0 31.2,53.5 32.4,54.2 33.6,55.0 34.8,56.1 36.0,57.3 37.2,58.7 38.4,59.4 39.6,56.2 40.8,53.2 42.0,50.4 43.2,47.8 44.4,45.3 45.6,43.1 46.8,41.0 48.0,39.1 49.2,37.4 50.4,35.8 51.6,34.4 52.8,33.3 54.0,32.3 55.2,31.5 56.4,30.8 57.6,30.4 58.8,30.1 60.0,30.0 61.2,29.9 62.4,29.6 63.6,29.2 64.8,28.5 66.0,27.7 67.2,26.7 68.4,25.6 69.6,24.2 70.8,22.6 72.0,20.9 73.2,19.0 74.4,16.9 75.6,14.7 76.8,12.2 78.0,9.6 79.2,6.8 80.4,3.8 81.6,0.6 82.8,1.3 84.0,2.7 85.2,3.9 86.4,5.0 87.6,5.8 88.8,6.5 90.0,7.0 91.2,7.4 92.4,7.5 93.6,7.5 94.8,7.2 96.0,6.8 97.2,6.2 98.4,5.5 99.6,4.5 100.8,3.4 102.0,2.1 103.2,0.6 104.4,0.5 105.6,1.1 106.8,1.5 108.0,1.8 109.2,1.9 110.4,1.8 111.6,1.5 112.8,1.0 114.0,0.4 115.2,0.2 116.4,0.4 117.6,0.5 118.8,0.3 120.0,0.0"></path></svg></a></div></li></ul></div></div><article class="howtos"><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。 不幸的是，他们不支持所有的缓动函数，所以你必须指定贝赛尔曲线实现缓动函数。</p><div class="click"><p>选取缓动函数以显示贝赛尔曲线。</p></div><pre><code>div { -webkit-transition: all 600ms <strong>缓动函数的贝赛尔曲线</strong>; transition: all 600ms <strong>缓动函数的贝赛尔曲线</strong>; }</code></pre></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$缓动函数名称</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>缓动函数名称</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInSine"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInSine</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,59.9 4.8,59.9 6.0,59.8 7.2,59.7 8.4,59.6 9.6,59.5 10.8,59.4 12.0,59.3 13.2,59.1 14.4,58.9 15.6,58.8 16.8,58.6 18.0,58.3 19.2,58.1 20.4,57.9 21.6,57.6 22.8,57.3 24.0,57.1 25.2,56.8 26.4,56.5 27.6,56.1 28.8,55.8 30.0,55.4 31.2,55.1 32.4,54.7 33.6,54.3 34.8,53.9 36.0,53.5 37.2,53.0 38.4,52.6 39.6,52.1 40.8,51.6 42.0,51.2 43.2,50.7 44.4,50.1 45.6,49.6 46.8,49.1 48.0,48.5 49.2,48.0 50.4,47.4 51.6,46.8 52.8,46.2 54.0,45.6 55.2,45.0 56.4,44.4 57.6,43.7 58.8,43.1 60.0,42.4 61.2,41.8 62.4,41.1 63.6,40.4 64.8,39.7 66.0,39.0 67.2,38.2 68.4,37.5 69.6,36.8 70.8,36.0 72.0,35.3 73.2,34.5 74.4,33.7 75.6,32.9 76.8,32.1 78.0,31.3 79.2,30.5 80.4,29.7 81.6,28.9 82.8,28.1 84.0,27.2 85.2,26.4 86.4,25.5 87.6,24.7 88.8,23.8 90.0,23.0 91.2,22.1 92.4,21.2 93.6,20.3 94.8,19.4 96.0,18.5 97.2,17.6 98.4,16.7 99.6,15.8 100.8,14.9 102.0,14.0 103.2,13.1 104.4,12.2 105.6,11.2 106.8,10.3 108.0,9.4 109.2,8.5 110.4,7.5 111.6,6.6 112.8,5.6 114.0,4.7 115.2,3.8 116.4,2.8 117.6,1.9 118.8,0.9 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.47, 0, 0.745, 0.715)</strong>; transition: all 600ms <strong>cubic-bezier(0.47, 0, 0.745, 0.715)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.47,0,.745,.715">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeInSine</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInSine</strong>', function () { … })</code></pre></section></article><article class="easing-description easeOutSine"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeOutSine</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,59.1 2.4,58.1 3.6,57.2 4.8,56.2 6.0,55.3 7.2,54.4 8.4,53.4 9.6,52.5 10.8,51.5 12.0,50.6 13.2,49.7 14.4,48.8 15.6,47.8 16.8,46.9 18.0,46.0 19.2,45.1 20.4,44.2 21.6,43.3 22.8,42.4 24.0,41.5 25.2,40.6 26.4,39.7 27.6,38.8 28.8,37.9 30.0,37.0 31.2,36.2 32.4,35.3 33.6,34.5 34.8,33.6 36.0,32.8 37.2,31.9 38.4,31.1 39.6,30.3 40.8,29.5 42.0,28.7 43.2,27.9 44.4,27.1 45.6,26.3 46.8,25.5 48.0,24.7 49.2,24.0 50.4,23.2 51.6,22.5 52.8,21.8 54.0,21.0 55.2,20.3 56.4,19.6 57.6,18.9 58.8,18.2 60.0,17.6 61.2,16.9 62.4,16.3 63.6,15.6 64.8,15.0 66.0,14.4 67.2,13.8 68.4,13.2 69.6,12.6 70.8,12.0 72.0,11.5 73.2,10.9 74.4,10.4 75.6,9.9 76.8,9.3 78.0,8.8 79.2,8.4 80.4,7.9 81.6,7.4 82.8,7.0 84.0,6.5 85.2,6.1 86.4,5.7 87.6,5.3 88.8,4.9 90.0,4.6 91.2,4.2 92.4,3.9 93.6,3.5 94.8,3.2 96.0,2.9 97.2,2.7 98.4,2.4 99.6,2.1 100.8,1.9 102.0,1.7 103.2,1.4 104.4,1.2 105.6,1.1 106.8,0.9 108.0,0.7 109.2,0.6 110.4,0.5 111.6,0.4 112.8,0.3 114.0,0.2 115.2,0.1 116.4,0.1 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.39, 0.575, 0.565, 1)</strong>; transition: all 600ms <strong>cubic-bezier(0.39, 0.575, 0.565, 1)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.39,.575,.565,1">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeOutSine</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutSine</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInOutSine"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInOutSine</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,59.9 3.6,59.9 4.8,59.8 6.0,59.6 7.2,59.5 8.4,59.3 9.6,59.1 10.8,58.8 12.0,58.5 13.2,58.2 14.4,57.9 15.6,57.5 16.8,57.1 18.0,56.7 19.2,56.3 20.4,55.8 21.6,55.3 22.8,54.8 24.0,54.3 25.2,53.7 26.4,53.1 27.6,52.5 28.8,51.9 30.0,51.2 31.2,50.5 32.4,49.8 33.6,49.1 34.8,48.4 36.0,47.6 37.2,46.9 38.4,46.1 39.6,45.3 40.8,44.5 42.0,43.6 43.2,42.8 44.4,41.9 45.6,41.0 46.8,40.2 48.0,39.3 49.2,38.4 50.4,37.5 51.6,36.5 52.8,35.6 54.0,34.7 55.2,33.8 56.4,32.8 57.6,31.9 58.8,30.9 60.0,30.0 61.2,29.1 62.4,28.1 63.6,27.2 64.8,26.2 66.0,25.3 67.2,24.4 68.4,23.5 69.6,22.5 70.8,21.6 72.0,20.7 73.2,19.8 74.4,19.0 75.6,18.1 76.8,17.2 78.0,16.4 79.2,15.5 80.4,14.7 81.6,13.9 82.8,13.1 84.0,12.4 85.2,11.6 86.4,10.9 87.6,10.2 88.8,9.5 90.0,8.8 91.2,8.1 92.4,7.5 93.6,6.9 94.8,6.3 96.0,5.7 97.2,5.2 98.4,4.7 99.6,4.2 100.8,3.7 102.0,3.3 103.2,2.9 104.4,2.5 105.6,2.1 106.8,1.8 108.0,1.5 109.2,1.2 110.4,0.9 111.6,0.7 112.8,0.5 114.0,0.4 115.2,0.2 116.4,0.1 117.6,0.1 118.8,0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.445, 0.05, 0.55, 0.95)</strong>; transition: all 600ms <strong>cubic-bezier(0.445, 0.05, 0.55, 0.95)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.445,.05,.55,.95">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeInOutSine</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutSine</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInQuad"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInQuad</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,59.9 4.8,59.9 6.0,59.9 7.2,59.8 8.4,59.7 9.6,59.6 10.8,59.5 12.0,59.4 13.2,59.3 14.4,59.1 15.6,59.0 16.8,58.8 18.0,58.7 19.2,58.5 20.4,58.3 21.6,58.1 22.8,57.8 24.0,57.6 25.2,57.4 26.4,57.1 27.6,56.8 28.8,56.5 30.0,56.3 31.2,55.9 32.4,55.6 33.6,55.3 34.8,55.0 36.0,54.6 37.2,54.2 38.4,53.9 39.6,53.5 40.8,53.1 42.0,52.7 43.2,52.2 44.4,51.8 45.6,51.3 46.8,50.9 48.0,50.4 49.2,49.9 50.4,49.4 51.6,48.9 52.8,48.4 54.0,47.9 55.2,47.3 56.4,46.7 57.6,46.2 58.8,45.6 60.0,45.0 61.2,44.4 62.4,43.8 63.6,43.1 64.8,42.5 66.0,41.8 67.2,41.2 68.4,40.5 69.6,39.8 70.8,39.1 72.0,38.4 73.2,37.7 74.4,36.9 75.6,36.2 76.8,35.4 78.0,34.7 79.2,33.9 80.4,33.1 81.6,32.3 82.8,31.4 84.0,30.6 85.2,29.8 86.4,28.9 87.6,28.0 88.8,27.1 90.0,26.3 91.2,25.3 92.4,24.4 93.6,23.5 94.8,22.6 96.0,21.6 97.2,20.6 98.4,19.7 99.6,18.7 100.8,17.7 102.0,16.7 103.2,15.6 104.4,14.6 105.6,13.5 106.8,12.5 108.0,11.4 109.2,10.3 110.4,9.2 111.6,8.1 112.8,7.0 114.0,5.9 115.2,4.7 116.4,3.5 117.6,2.4 118.8,1.2 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.55, 0.085, 0.68, 0.53)</strong>; transition: all 600ms <strong>cubic-bezier(0.55, 0.085, 0.68, 0.53)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.55,.085,.68,.53">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeInQuad</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInQuad</strong>', function () { … })</code></pre></section></article><article class="easing-description easeOutQuad"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeOutQuad</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,58.8 2.4,57.6 3.6,56.5 4.8,55.3 6.0,54.2 7.2,53.0 8.4,51.9 9.6,50.8 10.8,49.7 12.0,48.6 13.2,47.5 14.4,46.5 15.6,45.4 16.8,44.4 18.0,43.3 19.2,42.3 20.4,41.3 21.6,40.3 22.8,39.4 24.0,38.4 25.2,37.4 26.4,36.5 27.6,35.6 28.8,34.7 30.0,33.8 31.2,32.9 32.4,32.0 33.6,31.1 34.8,30.2 36.0,29.4 37.2,28.6 38.4,27.7 39.6,26.9 40.8,26.1 42.0,25.4 43.2,24.6 44.4,23.8 45.6,23.1 46.8,22.3 48.0,21.6 49.2,20.9 50.4,20.2 51.6,19.5 52.8,18.8 54.0,18.2 55.2,17.5 56.4,16.9 57.6,16.2 58.8,15.6 60.0,15.0 61.2,14.4 62.4,13.8 63.6,13.3 64.8,12.7 66.0,12.1 67.2,11.6 68.4,11.1 69.6,10.6 70.8,10.1 72.0,9.6 73.2,9.1 74.4,8.7 75.6,8.2 76.8,7.8 78.0,7.3 79.2,6.9 80.4,6.5 81.6,6.1 82.8,5.8 84.0,5.4 85.2,5.0 86.4,4.7 87.6,4.4 88.8,4.1 90.0,3.8 91.2,3.5 92.4,3.2 93.6,2.9 94.8,2.6 96.0,2.4 97.2,2.2 98.4,1.9 99.6,1.7 100.8,1.5 102.0,1.4 103.2,1.2 104.4,1.0 105.6,0.9 106.8,0.7 108.0,0.6 109.2,0.5 110.4,0.4 111.6,0.3 112.8,0.2 114.0,0.2 115.2,0.1 116.4,0.1 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.25, 0.46, 0.45, 0.94)</strong>; transition: all 600ms <strong>cubic-bezier(0.25, 0.46, 0.45, 0.94)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.25,.46,.45,.94">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeOutQuad</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutQuad</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInOutQuad"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInOutQuad</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,59.9 4.8,59.8 6.0,59.7 7.2,59.6 8.4,59.4 9.6,59.2 10.8,59.0 12.0,58.8 13.2,58.5 14.4,58.3 15.6,58.0 16.8,57.6 18.0,57.3 19.2,56.9 20.4,56.5 21.6,56.1 22.8,55.7 24.0,55.2 25.2,54.7 26.4,54.2 27.6,53.7 28.8,53.1 30.0,52.5 31.2,51.9 32.4,51.3 33.6,50.6 34.8,49.9 36.0,49.2 37.2,48.5 38.4,47.7 39.6,46.9 40.8,46.1 42.0,45.3 43.2,44.4 44.4,43.6 45.6,42.7 46.8,41.7 48.0,40.8 49.2,39.8 50.4,38.8 51.6,37.8 52.8,36.8 54.0,35.7 55.2,34.6 56.4,33.5 57.6,32.4 58.8,31.2 60.0,30.0 61.2,28.8 62.4,27.6 63.6,26.5 64.8,25.4 66.0,24.3 67.2,23.2 68.4,22.2 69.6,21.2 70.8,20.2 72.0,19.2 73.2,18.3 74.4,17.3 75.6,16.4 76.8,15.6 78.0,14.7 79.2,13.9 80.4,13.1 81.6,12.3 82.8,11.5 84.0,10.8 85.2,10.1 86.4,9.4 87.6,8.7 88.8,8.1 90.0,7.5 91.2,6.9 92.4,6.3 93.6,5.8 94.8,5.3 96.0,4.8 97.2,4.3 98.4,3.9 99.6,3.5 100.8,3.1 102.0,2.7 103.2,2.4 104.4,2.0 105.6,1.7 106.8,1.5 108.0,1.2 109.2,1.0 110.4,0.8 111.6,0.6 112.8,0.4 114.0,0.3 115.2,0.2 116.4,0.1 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.455, 0.03, 0.515, 0.955)</strong>; transition: all 600ms <strong>cubic-bezier(0.455, 0.03, 0.515, 0.955)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.455,.03,.515,.955">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeInOutQuad</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutQuad</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInCubic"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInCubic</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,59.9 13.2,59.9 14.4,59.9 15.6,59.9 16.8,59.8 18.0,59.8 19.2,59.8 20.4,59.7 21.6,59.7 22.8,59.6 24.0,59.5 25.2,59.4 26.4,59.4 27.6,59.3 28.8,59.2 30.0,59.1 31.2,58.9 32.4,58.8 33.6,58.7 34.8,58.5 36.0,58.4 37.2,58.2 38.4,58.0 39.6,57.8 40.8,57.6 42.0,57.4 43.2,57.2 44.4,57.0 45.6,56.7 46.8,56.4 48.0,56.2 49.2,55.9 50.4,55.6 51.6,55.2 52.8,54.9 54.0,54.5 55.2,54.2 56.4,53.8 57.6,53.4 58.8,52.9 60.0,52.5 61.2,52.0 62.4,51.6 63.6,51.1 64.8,50.6 66.0,50.0 67.2,49.5 68.4,48.9 69.6,48.3 70.8,47.7 72.0,47.0 73.2,46.4 74.4,45.7 75.6,45.0 76.8,44.3 78.0,43.5 79.2,42.8 80.4,42.0 81.6,41.1 82.8,40.3 84.0,39.4 85.2,38.5 86.4,37.6 87.6,36.7 88.8,35.7 90.0,34.7 91.2,33.7 92.4,32.6 93.6,31.5 94.8,30.4 96.0,29.3 97.2,28.1 98.4,26.9 99.6,25.7 100.8,24.4 102.0,23.2 103.2,21.8 104.4,20.5 105.6,19.1 106.8,17.7 108.0,16.3 109.2,14.8 110.4,13.3 111.6,11.7 112.8,10.2 114.0,8.6 115.2,6.9 116.4,5.2 117.6,3.5 118.8,1.8 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.55, 0.055, 0.675, 0.19)</strong>; transition: all 600ms <strong>cubic-bezier(0.55, 0.055, 0.675, 0.19)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.55,.055,.675,.19">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeInCubic</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInCubic</strong>', function () { … })</code></pre></section></article><article class="easing-description easeOutCubic"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeOutCubic</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,58.2 2.4,56.5 3.6,54.8 4.8,53.1 6.0,51.4 7.2,49.8 8.4,48.3 9.6,46.7 10.8,45.2 12.0,43.7 13.2,42.3 14.4,40.9 15.6,39.5 16.8,38.2 18.0,36.8 19.2,35.6 20.4,34.3 21.6,33.1 22.8,31.9 24.0,30.7 25.2,29.6 26.4,28.5 27.6,27.4 28.8,26.3 30.0,25.3 31.2,24.3 32.4,23.3 33.6,22.4 34.8,21.5 36.0,20.6 37.2,19.7 38.4,18.9 39.6,18.0 40.8,17.2 42.0,16.5 43.2,15.7 44.4,15.0 45.6,14.3 46.8,13.6 48.0,13.0 49.2,12.3 50.4,11.7 51.6,11.1 52.8,10.5 54.0,10.0 55.2,9.4 56.4,8.9 57.6,8.4 58.8,8.0 60.0,7.5 61.2,7.1 62.4,6.6 63.6,6.2 64.8,5.8 66.0,5.5 67.2,5.1 68.4,4.8 69.6,4.4 70.8,4.1 72.0,3.8 73.2,3.6 74.4,3.3 75.6,3.0 76.8,2.8 78.0,2.6 79.2,2.4 80.4,2.2 81.6,2.0 82.8,1.8 84.0,1.6 85.2,1.5 86.4,1.3 87.6,1.2 88.8,1.1 90.0,0.9 91.2,0.8 92.4,0.7 93.6,0.6 94.8,0.6 96.0,0.5 97.2,0.4 98.4,0.3 99.6,0.3 100.8,0.2 102.0,0.2 103.2,0.2 104.4,0.1 105.6,0.1 106.8,0.1 108.0,0.1 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.215, 0.61, 0.355, 1)</strong>; transition: all 600ms <strong>cubic-bezier(0.215, 0.61, 0.355, 1)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.215,.61,.355,1">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeOutCubic</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutCubic</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInOutCubic"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInOutCubic</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,59.9 8.4,59.9 9.6,59.9 10.8,59.8 12.0,59.8 13.2,59.7 14.4,59.6 15.6,59.5 16.8,59.3 18.0,59.2 19.2,59.0 20.4,58.8 21.6,58.6 22.8,58.4 24.0,58.1 25.2,57.8 26.4,57.4 27.6,57.1 28.8,56.7 30.0,56.3 31.2,55.8 32.4,55.3 33.6,54.7 34.8,54.1 36.0,53.5 37.2,52.9 38.4,52.1 39.6,51.4 40.8,50.6 42.0,49.7 43.2,48.8 44.4,47.8 45.6,46.8 46.8,45.8 48.0,44.6 49.2,43.5 50.4,42.2 51.6,40.9 52.8,39.6 54.0,38.1 55.2,36.6 56.4,35.1 57.6,33.5 58.8,31.8 60.0,30.0 61.2,28.2 62.4,26.5 63.6,24.9 64.8,23.4 66.0,21.9 67.2,20.4 68.4,19.1 69.6,17.8 70.8,16.5 72.0,15.4 73.2,14.2 74.4,13.2 75.6,12.2 76.8,11.2 78.0,10.3 79.2,9.4 80.4,8.6 81.6,7.9 82.8,7.1 84.0,6.5 85.2,5.9 86.4,5.3 87.6,4.7 88.8,4.2 90.0,3.8 91.2,3.3 92.4,2.9 93.6,2.6 94.8,2.2 96.0,1.9 97.2,1.6 98.4,1.4 99.6,1.2 100.8,1.0 102.0,0.8 103.2,0.7 104.4,0.5 105.6,0.4 106.8,0.3 108.0,0.2 109.2,0.2 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.645, 0.045, 0.355, 1)</strong>; transition: all 600ms <strong>cubic-bezier(0.645, 0.045, 0.355, 1)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.645,.045,.355,1">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeInOutCubic</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutCubic</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInQuart"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInQuart</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,60.0 13.2,60.0 14.4,60.0 15.6,60.0 16.8,60.0 18.0,60.0 19.2,60.0 20.4,59.9 21.6,59.9 22.8,59.9 24.0,59.9 25.2,59.9 26.4,59.9 27.6,59.8 28.8,59.8 30.0,59.8 31.2,59.7 32.4,59.7 33.6,59.6 34.8,59.6 36.0,59.5 37.2,59.4 38.4,59.4 39.6,59.3 40.8,59.2 42.0,59.1 43.2,59.0 44.4,58.9 45.6,58.7 46.8,58.6 48.0,58.5 49.2,58.3 50.4,58.1 51.6,57.9 52.8,57.8 54.0,57.5 55.2,57.3 56.4,57.1 57.6,56.8 58.8,56.5 60.0,56.3 61.2,55.9 62.4,55.6 63.6,55.3 64.8,54.9 66.0,54.5 67.2,54.1 68.4,53.7 69.6,53.2 70.8,52.7 72.0,52.2 73.2,51.7 74.4,51.1 75.6,50.5 76.8,49.9 78.0,49.3 79.2,48.6 80.4,47.9 81.6,47.2 82.8,46.4 84.0,45.6 85.2,44.8 86.4,43.9 87.6,43.0 88.8,42.0 90.0,41.0 91.2,40.0 92.4,38.9 93.6,37.8 94.8,36.6 96.0,35.4 97.2,34.2 98.4,32.9 99.6,31.5 100.8,30.1 102.0,28.7 103.2,27.2 104.4,25.6 105.6,24.0 106.8,22.4 108.0,20.6 109.2,18.9 110.4,17.0 111.6,15.1 112.8,13.2 114.0,11.1 115.2,9.0 116.4,6.9 117.6,4.7 118.8,2.4 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.895, 0.03, 0.685, 0.22)</strong>; transition: all 600ms <strong>cubic-bezier(0.895, 0.03, 0.685, 0.22)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.895,.03,.685,.22">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeInQuart</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInQuart</strong>', function () { … })</code></pre></section></article><article class="easing-description easeOutQuart"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeOutQuart</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,57.6 2.4,55.3 3.6,53.1 4.8,51.0 6.0,48.9 7.2,46.8 8.4,44.9 9.6,43.0 10.8,41.1 12.0,39.4 13.2,37.6 14.4,36.0 15.6,34.4 16.8,32.8 18.0,31.3 19.2,29.9 20.4,28.5 21.6,27.1 22.8,25.8 24.0,24.6 25.2,23.4 26.4,22.2 27.6,21.1 28.8,20.0 30.0,19.0 31.2,18.0 32.4,17.0 33.6,16.1 34.8,15.2 36.0,14.4 37.2,13.6 38.4,12.8 39.6,12.1 40.8,11.4 42.0,10.7 43.2,10.1 44.4,9.5 45.6,8.9 46.8,8.3 48.0,7.8 49.2,7.3 50.4,6.8 51.6,6.3 52.8,5.9 54.0,5.5 55.2,5.1 56.4,4.7 57.6,4.4 58.8,4.1 60.0,3.8 61.2,3.5 62.4,3.2 63.6,2.9 64.8,2.7 66.0,2.5 67.2,2.2 68.4,2.1 69.6,1.9 70.8,1.7 72.0,1.5 73.2,1.4 74.4,1.3 75.6,1.1 76.8,1.0 78.0,0.9 79.2,0.8 80.4,0.7 81.6,0.6 82.8,0.6 84.0,0.5 85.2,0.4 86.4,0.4 87.6,0.3 88.8,0.3 90.0,0.2 91.2,0.2 92.4,0.2 93.6,0.1 94.8,0.1 96.0,0.1 97.2,0.1 98.4,0.1 99.6,0.1 100.8,0.0 102.0,0.0 103.2,0.0 104.4,0.0 105.6,0.0 106.8,0.0 108.0,0.0 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.165, 0.84, 0.44, 1)</strong>; transition: all 600ms <strong>cubic-bezier(0.165, 0.84, 0.44, 1)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.165,.84,.44,1">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeOutQuart</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutQuart</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInOutQuart"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInOutQuart</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,60.0 13.2,59.9 14.4,59.9 15.6,59.9 16.8,59.8 18.0,59.8 19.2,59.7 20.4,59.6 21.6,59.5 22.8,59.4 24.0,59.2 25.2,59.1 26.4,58.9 27.6,58.7 28.8,58.4 30.0,58.1 31.2,57.8 32.4,57.4 33.6,57.0 34.8,56.6 36.0,56.1 37.2,55.6 38.4,55.0 39.6,54.3 40.8,53.6 42.0,52.8 43.2,51.9 44.4,51.0 45.6,50.0 46.8,48.9 48.0,47.7 49.2,46.4 50.4,45.1 51.6,43.6 52.8,42.0 54.0,40.3 55.2,38.5 56.4,36.6 57.6,34.5 58.8,32.3 60.0,30.0 61.2,27.7 62.4,25.5 63.6,23.4 64.8,21.5 66.0,19.7 67.2,18.0 68.4,16.4 69.6,14.9 70.8,13.6 72.0,12.3 73.2,11.1 74.4,10.0 75.6,9.0 76.8,8.1 78.0,7.2 79.2,6.4 80.4,5.7 81.6,5.0 82.8,4.4 84.0,3.9 85.2,3.4 86.4,3.0 87.6,2.6 88.8,2.2 90.0,1.9 91.2,1.6 92.4,1.3 93.6,1.1 94.8,0.9 96.0,0.8 97.2,0.6 98.4,0.5 99.6,0.4 100.8,0.3 102.0,0.2 103.2,0.2 104.4,0.1 105.6,0.1 106.8,0.1 108.0,0.0 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.77, 0, 0.175, 1)</strong>; transition: all 600ms <strong>cubic-bezier(0.77, 0, 0.175, 1)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.77,0,.175,1">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeInOutQuart</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutQuart</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInQuint"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInQuint</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,60.0 13.2,60.0 14.4,60.0 15.6,60.0 16.8,60.0 18.0,60.0 19.2,60.0 20.4,60.0 21.6,60.0 22.8,60.0 24.0,60.0 25.2,60.0 26.4,60.0 27.6,60.0 28.8,60.0 30.0,59.9 31.2,59.9 32.4,59.9 33.6,59.9 34.8,59.9 36.0,59.9 37.2,59.8 38.4,59.8 39.6,59.8 40.8,59.7 42.0,59.7 43.2,59.6 44.4,59.6 45.6,59.5 46.8,59.5 48.0,59.4 49.2,59.3 50.4,59.2 51.6,59.1 52.8,59.0 54.0,58.9 55.2,58.8 56.4,58.6 57.6,58.5 58.8,58.3 60.0,58.1 61.2,57.9 62.4,57.7 63.6,57.5 64.8,57.2 66.0,57.0 67.2,56.7 68.4,56.4 69.6,56.1 70.8,55.7 72.0,55.3 73.2,54.9 74.4,54.5 75.6,54.0 76.8,53.6 78.0,53.0 79.2,52.5 80.4,51.9 81.6,51.3 82.8,50.6 84.0,49.9 85.2,49.2 86.4,48.4 87.6,47.6 88.8,46.7 90.0,45.8 91.2,44.8 92.4,43.8 93.6,42.7 94.8,41.5 96.0,40.3 97.2,39.1 98.4,37.8 99.6,36.4 100.8,34.9 102.0,33.4 103.2,31.8 104.4,30.1 105.6,28.3 106.8,26.5 108.0,24.6 109.2,22.6 110.4,20.5 111.6,18.3 112.8,16.0 114.0,13.6 115.2,11.1 116.4,8.5 117.6,5.8 118.8,2.9 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.755, 0.05, 0.855, 0.06)</strong>; transition: all 600ms <strong>cubic-bezier(0.755, 0.05, 0.855, 0.06)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.755,.05,.855,.06">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeInQuint</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInQuint</strong>', function () { … })</code></pre></section></article><article class="easing-description easeOutQuint"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeOutQuint</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,57.1 2.4,54.2 3.6,51.5 4.8,48.9 6.0,46.4 7.2,44.0 8.4,41.7 9.6,39.5 10.8,37.4 12.0,35.4 13.2,33.5 14.4,31.7 15.6,29.9 16.8,28.2 18.0,26.6 19.2,25.1 20.4,23.6 21.6,22.2 22.8,20.9 24.0,19.7 25.2,18.5 26.4,17.3 27.6,16.2 28.8,15.2 30.0,14.2 31.2,13.3 32.4,12.4 33.6,11.6 34.8,10.8 36.0,10.1 37.2,9.4 38.4,8.7 39.6,8.1 40.8,7.5 42.0,7.0 43.2,6.4 44.4,6.0 45.6,5.5 46.8,5.1 48.0,4.7 49.2,4.3 50.4,3.9 51.6,3.6 52.8,3.3 54.0,3.0 55.2,2.8 56.4,2.5 57.6,2.3 58.8,2.1 60.0,1.9 61.2,1.7 62.4,1.5 63.6,1.4 64.8,1.2 66.0,1.1 67.2,1.0 68.4,0.9 69.6,0.8 70.8,0.7 72.0,0.6 73.2,0.5 74.4,0.5 75.6,0.4 76.8,0.4 78.0,0.3 79.2,0.3 80.4,0.2 81.6,0.2 82.8,0.2 84.0,0.1 85.2,0.1 86.4,0.1 87.6,0.1 88.8,0.1 90.0,0.1 91.2,0.0 92.4,0.0 93.6,0.0 94.8,0.0 96.0,0.0 97.2,0.0 98.4,0.0 99.6,0.0 100.8,0.0 102.0,0.0 103.2,0.0 104.4,0.0 105.6,0.0 106.8,0.0 108.0,0.0 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.23, 1, 0.32, 1)</strong>; transition: all 600ms <strong>cubic-bezier(0.23, 1, 0.32, 1)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.23,1,.32,1">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeOutQuint</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutQuint</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInOutQuint"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInOutQuint</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,60.0 13.2,60.0 14.4,60.0 15.6,60.0 16.8,59.9 18.0,59.9 19.2,59.9 20.4,59.9 21.6,59.8 22.8,59.8 24.0,59.7 25.2,59.6 26.4,59.5 27.6,59.4 28.8,59.2 30.0,59.1 31.2,58.9 32.4,58.6 33.6,58.3 34.8,58.0 36.0,57.7 37.2,57.3 38.4,56.8 39.6,56.2 40.8,55.6 42.0,55.0 43.2,54.2 44.4,53.3 45.6,52.4 46.8,51.3 48.0,50.2 49.2,48.9 50.4,47.5 51.6,45.9 52.8,44.2 54.0,42.3 55.2,40.2 56.4,38.0 57.6,35.5 58.8,32.9 60.0,30.0 61.2,27.1 62.4,24.5 63.6,22.0 64.8,19.8 66.0,17.7 67.2,15.8 68.4,14.1 69.6,12.5 70.8,11.1 72.0,9.8 73.2,8.7 74.4,7.6 75.6,6.7 76.8,5.8 78.0,5.0 79.2,4.4 80.4,3.8 81.6,3.2 82.8,2.7 84.0,2.3 85.2,2.0 86.4,1.7 87.6,1.4 88.8,1.1 90.0,0.9 91.2,0.8 92.4,0.6 93.6,0.5 94.8,0.4 96.0,0.3 97.2,0.2 98.4,0.2 99.6,0.1 100.8,0.1 102.0,0.1 103.2,0.1 104.4,0.0 105.6,0.0 106.8,0.0 108.0,0.0 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.86, 0, 0.07, 1)</strong>; transition: all 600ms <strong>cubic-bezier(0.86, 0, 0.07, 1)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.86,0,.07,1">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeInOutQuint</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutQuint</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInExpo"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInExpo</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,59.9 2.4,59.9 3.6,59.9 4.8,59.9 6.0,59.9 7.2,59.9 8.4,59.9 9.6,59.9 10.8,59.9 12.0,59.9 13.2,59.9 14.4,59.9 15.6,59.9 16.8,59.8 18.0,59.8 19.2,59.8 20.4,59.8 21.6,59.8 22.8,59.8 24.0,59.8 25.2,59.7 26.4,59.7 27.6,59.7 28.8,59.7 30.0,59.7 31.2,59.6 32.4,59.6 33.6,59.6 34.8,59.6 36.0,59.5 37.2,59.5 38.4,59.5 39.6,59.4 40.8,59.4 42.0,59.3 43.2,59.3 44.4,59.2 45.6,59.2 46.8,59.1 48.0,59.1 49.2,59.0 50.4,58.9 51.6,58.8 52.8,58.8 54.0,58.7 55.2,58.6 56.4,58.5 57.6,58.4 58.8,58.3 60.0,58.1 61.2,58.0 62.4,57.8 63.6,57.7 64.8,57.5 66.0,57.3 67.2,57.2 68.4,57.0 69.6,56.7 70.8,56.5 72.0,56.3 73.2,56.0 74.4,55.7 75.6,55.4 76.8,55.1 78.0,54.7 79.2,54.3 80.4,53.9 81.6,53.5 82.8,53.0 84.0,52.5 85.2,52.0 86.4,51.4 87.6,50.8 88.8,50.1 90.0,49.4 91.2,48.6 92.4,47.8 93.6,46.9 94.8,46.0 96.0,45.0 97.2,43.9 98.4,42.8 99.6,41.5 100.8,40.2 102.0,38.8 103.2,37.3 104.4,35.6 105.6,33.9 106.8,32.0 108.0,30.0 109.2,27.8 110.4,25.5 111.6,23.1 112.8,20.4 114.0,17.6 115.2,14.5 116.4,11.3 117.6,7.8 118.8,4.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.95, 0.05, 0.795, 0.035)</strong>; transition: all 600ms <strong>cubic-bezier(0.95, 0.05, 0.795, 0.035)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.95,.05,.795,.035">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeInExpo</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInExpo</strong>', function () { … })</code></pre></section></article><article class="easing-description easeOutExpo"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeOutExpo</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,56.0 2.4,52.2 3.6,48.7 4.8,45.5 6.0,42.4 7.2,39.6 8.4,36.9 9.6,34.5 10.8,32.2 12.0,30.0 13.2,28.0 14.4,26.1 15.6,24.4 16.8,22.7 18.0,21.2 19.2,19.8 20.4,18.5 21.6,17.2 22.8,16.1 24.0,15.0 25.2,14.0 26.4,13.1 27.6,12.2 28.8,11.4 30.0,10.6 31.2,9.9 32.4,9.2 33.6,8.6 34.8,8.0 36.0,7.5 37.2,7.0 38.4,6.5 39.6,6.1 40.8,5.7 42.0,5.3 43.2,4.9 44.4,4.6 45.6,4.3 46.8,4.0 48.0,3.8 49.2,3.5 50.4,3.3 51.6,3.0 52.8,2.8 54.0,2.7 55.2,2.5 56.4,2.3 57.6,2.2 58.8,2.0 60.0,1.9 61.2,1.7 62.4,1.6 63.6,1.5 64.8,1.4 66.0,1.3 67.2,1.2 68.4,1.2 69.6,1.1 70.8,1.0 72.0,0.9 73.2,0.9 74.4,0.8 75.6,0.8 76.8,0.7 78.0,0.7 79.2,0.6 80.4,0.6 81.6,0.5 82.8,0.5 84.0,0.5 85.2,0.4 86.4,0.4 87.6,0.4 88.8,0.4 90.0,0.3 91.2,0.3 92.4,0.3 93.6,0.3 94.8,0.3 96.0,0.2 97.2,0.2 98.4,0.2 99.6,0.2 100.8,0.2 102.0,0.2 103.2,0.2 104.4,0.1 105.6,0.1 106.8,0.1 108.0,0.1 109.2,0.1 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.1 115.2,0.1 116.4,0.1 117.6,0.1 118.8,0.1 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.19, 1, 0.22, 1)</strong>; transition: all 600ms <strong>cubic-bezier(0.19, 1, 0.22, 1)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.19,1,.22,1">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeOutExpo</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutExpo</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInOutExpo"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInOutExpo</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,59.9 6.0,59.9 7.2,59.9 8.4,59.9 9.6,59.9 10.8,59.9 12.0,59.9 13.2,59.9 14.4,59.8 15.6,59.8 16.8,59.8 18.0,59.8 19.2,59.7 20.4,59.7 21.6,59.6 22.8,59.6 24.0,59.5 25.2,59.5 26.4,59.4 27.6,59.3 28.8,59.2 30.0,59.1 31.2,58.9 32.4,58.8 33.6,58.6 34.8,58.4 36.0,58.1 37.2,57.8 38.4,57.5 39.6,57.2 40.8,56.7 42.0,56.3 43.2,55.7 44.4,55.1 45.6,54.3 46.8,53.5 48.0,52.5 49.2,51.4 50.4,50.1 51.6,48.6 52.8,46.9 54.0,45.0 55.2,42.8 56.4,40.2 57.6,37.3 58.8,33.9 60.0,30.0 61.2,26.1 62.4,22.7 63.6,19.8 64.8,17.2 66.0,15.0 67.2,13.1 68.4,11.4 69.6,9.9 70.8,8.6 72.0,7.5 73.2,6.5 74.4,5.7 75.6,4.9 76.8,4.3 78.0,3.8 79.2,3.3 80.4,2.8 81.6,2.5 82.8,2.2 84.0,1.9 85.2,1.6 86.4,1.4 87.6,1.2 88.8,1.1 90.0,0.9 91.2,0.8 92.4,0.7 93.6,0.6 94.8,0.5 96.0,0.5 97.2,0.4 98.4,0.4 99.6,0.3 100.8,0.3 102.0,0.2 103.2,0.2 104.4,0.2 105.6,0.2 106.8,0.1 108.0,0.1 109.2,0.1 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.1 115.2,0.1 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(1, 0, 0, 1)</strong>; transition: all 600ms <strong>cubic-bezier(1, 0, 0, 1)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#1,0,0,1">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeInOutExpo</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutExpo</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInCirc"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInCirc</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,59.9 7.2,59.9 8.4,59.9 9.6,59.8 10.8,59.8 12.0,59.7 13.2,59.6 14.4,59.6 15.6,59.5 16.8,59.4 18.0,59.3 19.2,59.2 20.4,59.1 21.6,59.0 22.8,58.9 24.0,58.8 25.2,58.7 26.4,58.5 27.6,58.4 28.8,58.2 30.0,58.1 31.2,57.9 32.4,57.8 33.6,57.6 34.8,57.4 36.0,57.2 37.2,57.0 38.4,56.8 39.6,56.6 40.8,56.4 42.0,56.2 43.2,56.0 44.4,55.7 45.6,55.5 46.8,55.2 48.0,55.0 49.2,54.7 50.4,54.5 51.6,54.2 52.8,53.9 54.0,53.6 55.2,53.3 56.4,53.0 57.6,52.6 58.8,52.3 60.0,52.0 61.2,51.6 62.4,51.2 63.6,50.9 64.8,50.5 66.0,50.1 67.2,49.7 68.4,49.3 69.6,48.9 70.8,48.4 72.0,48.0 73.2,47.5 74.4,47.1 75.6,46.6 76.8,46.1 78.0,45.6 79.2,45.1 80.4,44.5 81.6,44.0 82.8,43.4 84.0,42.8 85.2,42.3 86.4,41.6 87.6,41.0 88.8,40.4 90.0,39.7 91.2,39.0 92.4,38.3 93.6,37.5 94.8,36.8 96.0,36.0 97.2,35.2 98.4,34.3 99.6,33.5 100.8,32.6 102.0,31.6 103.2,30.6 104.4,29.6 105.6,28.5 106.8,27.4 108.0,26.2 109.2,24.9 110.4,23.5 111.6,22.1 112.8,20.5 114.0,18.7 115.2,16.8 116.4,14.6 117.6,11.9 118.8,8.5 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.6, 0.04, 0.98, 0.335)</strong>; transition: all 600ms <strong>cubic-bezier(0.6, 0.04, 0.98, 0.335)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.6,.04,.98,.335">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeInCirc</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInCirc</strong>', function () { … })</code></pre></section></article><article class="easing-description easeOutCirc"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeOutCirc</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,51.5 2.4,48.1 3.6,45.4 4.8,43.2 6.0,41.3 7.2,39.5 8.4,37.9 9.6,36.5 10.8,35.1 12.0,33.8 13.2,32.6 14.4,31.5 15.6,30.4 16.8,29.4 18.0,28.4 19.2,27.4 20.4,26.5 21.6,25.7 22.8,24.8 24.0,24.0 25.2,23.2 26.4,22.5 27.6,21.7 28.8,21.0 30.0,20.3 31.2,19.6 32.4,19.0 33.6,18.4 34.8,17.7 36.0,17.2 37.2,16.6 38.4,16.0 39.6,15.5 40.8,14.9 42.0,14.4 43.2,13.9 44.4,13.4 45.6,12.9 46.8,12.5 48.0,12.0 49.2,11.6 50.4,11.1 51.6,10.7 52.8,10.3 54.0,9.9 55.2,9.5 56.4,9.1 57.6,8.8 58.8,8.4 60.0,8.0 61.2,7.7 62.4,7.4 63.6,7.0 64.8,6.7 66.0,6.4 67.2,6.1 68.4,5.8 69.6,5.5 70.8,5.3 72.0,5.0 73.2,4.8 74.4,4.5 75.6,4.3 76.8,4.0 78.0,3.8 79.2,3.6 80.4,3.4 81.6,3.2 82.8,3.0 84.0,2.8 85.2,2.6 86.4,2.4 87.6,2.2 88.8,2.1 90.0,1.9 91.2,1.8 92.4,1.6 93.6,1.5 94.8,1.3 96.0,1.2 97.2,1.1 98.4,1.0 99.6,0.9 100.8,0.8 102.0,0.7 103.2,0.6 104.4,0.5 105.6,0.4 106.8,0.4 108.0,0.3 109.2,0.2 110.4,0.2 111.6,0.1 112.8,0.1 114.0,0.1 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.075, 0.82, 0.165, 1)</strong>; transition: all 600ms <strong>cubic-bezier(0.075, 0.82, 0.165, 1)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.075,.82,.165,1">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeOutCirc</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutCirc</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInOutCirc"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInOutCirc</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,59.9 4.8,59.9 6.0,59.8 7.2,59.8 8.4,59.7 9.6,59.6 10.8,59.5 12.0,59.4 13.2,59.3 14.4,59.1 15.6,59.0 16.8,58.8 18.0,58.6 19.2,58.4 20.4,58.2 21.6,58.0 22.8,57.7 24.0,57.5 25.2,57.2 26.4,56.9 27.6,56.6 28.8,56.3 30.0,56.0 31.2,55.6 32.4,55.2 33.6,54.9 34.8,54.4 36.0,54.0 37.2,53.5 38.4,53.1 39.6,52.5 40.8,52.0 42.0,51.4 43.2,50.8 44.4,50.2 45.6,49.5 46.8,48.8 48.0,48.0 49.2,47.2 50.4,46.3 51.6,45.3 52.8,44.2 54.0,43.1 55.2,41.8 56.4,40.2 57.6,38.4 58.8,36.0 60.0,30.0 61.2,24.0 62.4,21.6 63.6,19.8 64.8,18.2 66.0,16.9 67.2,15.8 68.4,14.7 69.6,13.7 70.8,12.8 72.0,12.0 73.2,11.2 74.4,10.5 75.6,9.8 76.8,9.2 78.0,8.6 79.2,8.0 80.4,7.5 81.6,6.9 82.8,6.5 84.0,6.0 85.2,5.6 86.4,5.1 87.6,4.8 88.8,4.4 90.0,4.0 91.2,3.7 92.4,3.4 93.6,3.1 94.8,2.8 96.0,2.5 97.2,2.3 98.4,2.0 99.6,1.8 100.8,1.6 102.0,1.4 103.2,1.2 104.4,1.0 105.6,0.9 106.8,0.7 108.0,0.6 109.2,0.5 110.4,0.4 111.6,0.3 112.8,0.2 114.0,0.2 115.2,0.1 116.4,0.1 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.785, 0.135, 0.15, 0.86)</strong>; transition: all 600ms <strong>cubic-bezier(0.785, 0.135, 0.15, 0.86)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.785,.135,.15,.86">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeInOutCirc</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutCirc</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInBack"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInBack</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.1 4.8,60.2 6.0,60.2 7.2,60.3 8.4,60.4 9.6,60.6 10.8,60.7 12.0,60.9 13.2,61.0 14.4,61.2 15.6,61.4 16.8,61.6 18.0,61.8 19.2,61.9 20.4,62.2 21.6,62.4 22.8,62.6 24.0,62.8 25.2,63.0 26.4,63.2 27.6,63.4 28.8,63.6 30.0,63.8 31.2,64.1 32.4,64.3 33.6,64.4 34.8,64.6 36.0,64.8 37.2,65.0 38.4,65.1 39.6,65.3 40.8,65.4 42.0,65.6 43.2,65.7 44.4,65.8 45.6,65.8 46.8,65.9 48.0,66.0 49.2,66.0 50.4,66.0 51.6,66.0 52.8,66.0 54.0,65.9 55.2,65.8 56.4,65.7 57.6,65.6 58.8,65.4 60.0,65.3 61.2,65.1 62.4,64.8 63.6,64.5 64.8,64.2 66.0,63.9 67.2,63.6 68.4,63.2 69.6,62.7 70.8,62.2 72.0,61.7 73.2,61.2 74.4,60.6 75.6,60.0 76.8,59.3 78.0,58.6 79.2,57.9 80.4,57.1 81.6,56.2 82.8,55.4 84.0,54.4 85.2,53.5 86.4,52.4 87.6,51.3 88.8,50.2 90.0,49.0 91.2,47.8 92.4,46.5 93.6,45.2 94.8,43.8 96.0,42.3 97.2,40.8 98.4,39.3 99.6,37.6 100.8,36.0 102.0,34.2 103.2,32.4 104.4,30.5 105.6,28.6 106.8,26.6 108.0,24.5 109.2,22.4 110.4,20.2 111.6,17.9 112.8,15.6 114.0,13.2 115.2,10.7 116.4,8.1 117.6,5.5 118.8,2.8 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.6, -0.28, 0.735, 0.045)</strong>; transition: all 600ms <strong>cubic-bezier(0.6, -0.28, 0.735, 0.045)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.6,-.28,.735,.045">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeInBack</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInBack</strong>', function () { … })</code></pre></section></article><article class="easing-description easeOutBack"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeOutBack</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,57.2 2.4,54.5 3.6,51.9 4.8,49.3 6.0,46.8 7.2,44.4 8.4,42.1 9.6,39.8 10.8,37.6 12.0,35.5 13.2,33.4 14.4,31.4 15.6,29.5 16.8,27.6 18.0,25.8 19.2,24.0 20.4,22.4 21.6,20.7 22.8,19.2 24.0,17.7 25.2,16.2 26.4,14.8 27.6,13.5 28.8,12.2 30.0,11.0 31.2,9.8 32.4,8.7 33.6,7.6 34.8,6.5 36.0,5.6 37.2,4.6 38.4,3.8 39.6,2.9 40.8,2.1 42.0,1.4 43.2,0.7 44.4,0.0 45.6,-0.6 46.8,-1.2 48.0,-1.7 49.2,-2.2 50.4,-2.7 51.6,-3.2 52.8,-3.6 54.0,-3.9 55.2,-4.2 56.4,-4.5 57.6,-4.8 58.8,-5.1 60.0,-5.3 61.2,-5.4 62.4,-5.6 63.6,-5.7 64.8,-5.8 66.0,-5.9 67.2,-6.0 68.4,-6.0 69.6,-6.0 70.8,-6.0 72.0,-6.0 73.2,-5.9 74.4,-5.8 75.6,-5.8 76.8,-5.7 78.0,-5.6 79.2,-5.4 80.4,-5.3 81.6,-5.1 82.8,-5.0 84.0,-4.8 85.2,-4.6 86.4,-4.4 87.6,-4.3 88.8,-4.1 90.0,-3.8 91.2,-3.6 92.4,-3.4 93.6,-3.2 94.8,-3.0 96.0,-2.8 97.2,-2.6 98.4,-2.4 99.6,-2.2 100.8,-1.9 102.0,-1.8 103.2,-1.6 104.4,-1.4 105.6,-1.2 106.8,-1.0 108.0,-0.9 109.2,-0.7 110.4,-0.6 111.6,-0.4 112.8,-0.3 114.0,-0.2 115.2,-0.2 116.4,-0.1 117.6,-0.0 118.8,-0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.175, 0.885, 0.32, 1.275)</strong>; transition: all 600ms <strong>cubic-bezier(0.175, 0.885, 0.32, 1.275)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.175,.885,.32,1.275">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeOutBack</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutBack</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInOutBack"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInOutBack</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,60.1 3.6,60.3 4.8,60.4 6.0,60.7 7.2,60.9 8.4,61.2 9.6,61.6 10.8,61.9 12.0,62.3 13.2,62.6 14.4,63.0 15.6,63.4 16.8,63.7 18.0,64.1 19.2,64.4 20.4,64.8 21.6,65.1 22.8,65.3 24.0,65.6 25.2,65.7 26.4,65.9 27.6,66.0 28.8,66.0 30.0,66.0 31.2,65.9 32.4,65.7 33.6,65.5 34.8,65.1 36.0,64.7 37.2,64.2 38.4,63.6 39.6,62.9 40.8,62.1 42.0,61.2 43.2,60.1 44.4,58.9 45.6,57.6 46.8,56.2 48.0,54.6 49.2,52.9 50.4,51.0 51.6,49.0 52.8,46.8 54.0,44.4 55.2,41.9 56.4,39.2 57.6,36.3 58.8,33.3 60.0,30.0 61.2,26.7 62.4,23.7 63.6,20.8 64.8,18.1 66.0,15.6 67.2,13.2 68.4,11.0 69.6,9.0 70.8,7.1 72.0,5.4 73.2,3.8 74.4,2.4 75.6,1.1 76.8,-0.1 78.0,-1.2 79.2,-2.1 80.4,-2.9 81.6,-3.6 82.8,-4.2 84.0,-4.7 85.2,-5.1 86.4,-5.5 87.6,-5.7 88.8,-5.9 90.0,-6.0 91.2,-6.0 92.4,-6.0 93.6,-5.9 94.8,-5.7 96.0,-5.6 97.2,-5.3 98.4,-5.1 99.6,-4.8 100.8,-4.4 102.0,-4.1 103.2,-3.7 104.4,-3.4 105.6,-3.0 106.8,-2.6 108.0,-2.3 109.2,-1.9 110.4,-1.6 111.6,-1.2 112.8,-0.9 114.0,-0.7 115.2,-0.4 116.4,-0.3 117.6,-0.1 118.8,-0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div { -webkit-transition: all 600ms <strong>cubic-bezier(0.68, -0.55, 0.265, 1.55)</strong>; transition: all 600ms <strong>cubic-bezier(0.68, -0.55, 0.265, 1.55)</strong>; }</code></pre><p>在 cubic-bezier.com <a target="_blank" href="http://cubic-bezier.com/#.68,-.55,.265,1.55">编辑</a></p></section><section class="scss"><h3>SCSS</h3><p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有 <a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div { @include transition(all 600ms ceaser(<strong>$easeInOutBack</strong>)); }</code></pre></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutBack</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInElastic"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInElastic</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,59.9 8.4,59.9 9.6,59.9 10.8,59.9 12.0,59.9 13.2,59.9 14.4,59.9 15.6,59.9 16.8,59.9 18.0,59.9 19.2,59.9 20.4,60.0 21.6,60.0 22.8,60.1 24.0,60.1 25.2,60.2 26.4,60.2 27.6,60.3 28.8,60.3 30.0,60.3 31.2,60.3 32.4,60.3 33.6,60.3 34.8,60.3 36.0,60.2 37.2,60.2 38.4,60.1 39.6,59.9 40.8,59.8 42.0,59.7 43.2,59.5 44.4,59.4 45.6,59.3 46.8,59.1 48.0,59.1 49.2,59.0 50.4,59.0 51.6,59.1 52.8,59.2 54.0,59.3 55.2,59.6 56.4,59.8 57.6,60.2 58.8,60.5 60.0,60.9 61.2,61.3 62.4,61.7 63.6,62.1 64.8,62.4 66.0,62.7 67.2,62.8 68.4,62.8 69.6,62.6 70.8,62.3 72.0,61.9 73.2,61.2 74.4,60.5 75.6,59.5 76.8,58.5 78.0,57.3 79.2,56.2 80.4,55.1 81.6,54.0 82.8,53.2 84.0,52.5 85.2,52.1 86.4,52.1 87.6,52.5 88.8,53.4 90.0,54.7 91.2,56.5 92.4,58.7 93.6,61.4 94.8,64.3 96.0,67.5 97.2,70.8 98.4,73.9 99.6,76.9 100.8,79.4 102.0,81.2 103.2,82.2 104.4,82.3 105.6,81.1 106.8,78.7 108.0,75.0 109.2,69.9 110.4,63.6 111.6,56.1 112.8,47.8 114.0,38.8 115.2,29.6 116.4,20.6 117.6,12.3 118.8,5.2 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p></section><section class="scss"><h3>SCSS</h3><p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInElastic</strong>', function () { … })</code></pre></section></article><article class="easing-description easeOutElastic"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeOutElastic</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,54.8 2.4,47.7 3.6,39.4 4.8,30.4 6.0,21.2 7.2,12.2 8.4,3.9 9.6,-3.6 10.8,-9.9 12.0,-15.0 13.2,-18.7 14.4,-21.1 15.6,-22.3 16.8,-22.2 18.0,-21.2 19.2,-19.4 20.4,-16.9 21.6,-13.9 22.8,-10.8 24.0,-7.5 25.2,-4.3 26.4,-1.4 27.6,1.3 28.8,3.5 30.0,5.3 31.2,6.6 32.4,7.5 33.6,7.9 34.8,7.9 36.0,7.5 37.2,6.8 38.4,6.0 39.6,4.9 40.8,3.8 42.0,2.7 43.2,1.5 44.4,0.5 45.6,-0.5 46.8,-1.2 48.0,-1.9 49.2,-2.3 50.4,-2.6 51.6,-2.8 52.8,-2.8 54.0,-2.7 55.2,-2.4 56.4,-2.1 57.6,-1.7 58.8,-1.3 60.0,-0.9 61.2,-0.5 62.4,-0.2 63.6,0.2 64.8,0.4 66.0,0.7 67.2,0.8 68.4,0.9 69.6,1.0 70.8,1.0 72.0,0.9 73.2,0.9 74.4,0.7 75.6,0.6 76.8,0.5 78.0,0.3 79.2,0.2 80.4,0.1 81.6,-0.1 82.8,-0.2 84.0,-0.2 85.2,-0.3 86.4,-0.3 87.6,-0.3 88.8,-0.3 90.0,-0.3 91.2,-0.3 92.4,-0.3 93.6,-0.2 94.8,-0.2 96.0,-0.1 97.2,-0.1 98.4,-0.0 99.6,0.0 100.8,0.1 102.0,0.1 103.2,0.1 104.4,0.1 105.6,0.1 106.8,0.1 108.0,0.1 109.2,0.1 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.0 115.2,0.0 116.4,0.0 117.6,-0.0 118.8,-0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p></section><section class="scss"><h3>SCSS</h3><p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutElastic</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInOutElastic"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInOutElastic</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,59.9 7.2,59.9 8.4,59.9 9.6,59.9 10.8,60.0 12.0,60.0 13.2,60.0 14.4,60.1 15.6,60.1 16.8,60.2 18.0,60.2 19.2,60.3 20.4,60.3 21.6,60.3 22.8,60.3 24.0,60.2 25.2,60.1 26.4,60.0 27.6,59.8 28.8,59.5 30.0,59.3 31.2,59.0 32.4,58.8 33.6,58.6 34.8,58.5 36.0,58.6 37.2,58.8 38.4,59.2 39.6,59.9 40.8,60.8 42.0,61.9 43.2,63.1 44.4,64.4 45.6,65.6 46.8,66.5 48.0,67.0 49.2,67.0 50.4,66.1 51.6,64.3 52.8,61.4 54.0,57.4 55.2,52.4 56.4,46.8 57.6,40.7 58.8,34.9 60.0,30.0 61.2,25.1 62.4,19.3 63.6,13.2 64.8,7.6 66.0,2.6 67.2,-1.4 68.4,-4.3 69.6,-6.1 70.8,-7.0 72.0,-7.0 73.2,-6.5 74.4,-5.6 75.6,-4.4 76.8,-3.1 78.0,-1.9 79.2,-0.8 80.4,0.1 81.6,0.8 82.8,1.2 84.0,1.4 85.2,1.5 86.4,1.4 87.6,1.2 88.8,1.0 90.0,0.7 91.2,0.5 92.4,0.2 93.6,0.0 94.8,-0.1 96.0,-0.2 97.2,-0.3 98.4,-0.3 99.6,-0.3 100.8,-0.3 102.0,-0.2 103.2,-0.2 104.4,-0.1 105.6,-0.1 106.8,-0.0 108.0,0.0 109.2,0.0 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.1 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p></section><section class="scss"><h3>SCSS</h3><p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutElastic</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInBounce"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInBounce</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,59.6 2.4,59.4 3.6,59.2 4.8,59.1 6.0,59.1 7.2,59.2 8.4,59.3 9.6,59.6 10.8,60.0 12.0,59.3 13.2,58.6 14.4,58.0 15.6,57.5 16.8,57.0 18.0,56.7 19.2,56.5 20.4,56.3 21.6,56.3 22.8,56.3 24.0,56.4 25.2,56.6 26.4,56.9 27.6,57.3 28.8,57.8 30.0,58.4 31.2,59.0 32.4,59.8 33.6,58.8 34.8,57.3 36.0,55.8 37.2,54.5 38.4,53.2 39.6,52.0 40.8,51.0 42.0,50.0 43.2,49.1 44.4,48.2 45.6,47.5 46.8,46.9 48.0,46.3 49.2,45.9 50.4,45.5 51.6,45.3 52.8,45.1 54.0,45.0 55.2,45.0 56.4,45.1 57.6,45.3 58.8,45.6 60.0,45.9 61.2,46.4 62.4,46.9 63.6,47.6 64.8,48.3 66.0,49.1 67.2,50.0 68.4,51.0 69.6,52.1 70.8,53.3 72.0,54.6 73.2,56.0 74.4,57.4 75.6,59.0 76.8,58.8 78.0,55.6 79.2,52.5 80.4,49.4 81.6,46.5 82.8,43.6 84.0,40.8 85.2,38.2 86.4,35.6 87.6,33.1 88.8,30.7 90.0,28.4 91.2,26.1 92.4,24.0 93.6,22.0 94.8,20.0 96.0,18.1 97.2,16.4 98.4,14.7 99.6,13.1 100.8,11.6 102.0,10.2 103.2,8.9 104.4,7.7 105.6,6.5 106.8,5.5 108.0,4.5 109.2,3.7 110.4,2.9 111.6,2.2 112.8,1.6 114.0,1.1 115.2,0.7 116.4,0.4 117.6,0.2 118.8,0.0 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p></section><section class="scss"><h3>SCSS</h3><p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInBounce</strong>', function () { … })</code></pre></section></article><article class="easing-description easeOutBounce"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeOutBounce</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,60.0 2.4,59.8 3.6,59.6 4.8,59.3 6.0,58.9 7.2,58.4 8.4,57.8 9.6,57.1 10.8,56.3 12.0,55.5 13.2,54.5 14.4,53.5 15.6,52.3 16.8,51.1 18.0,49.8 19.2,48.4 20.4,46.9 21.6,45.3 22.8,43.6 24.0,41.8 25.2,40.0 26.4,38.0 27.6,36.0 28.8,33.9 30.0,31.6 31.2,29.3 32.4,26.9 33.6,24.4 34.8,21.8 36.0,19.2 37.2,16.4 38.4,13.5 39.6,10.6 40.8,7.5 42.0,4.4 43.2,1.2 44.4,1.0 45.6,2.6 46.8,4.0 48.0,5.4 49.2,6.7 50.4,7.9 51.6,9.0 52.8,10.0 54.0,10.9 55.2,11.7 56.4,12.4 57.6,13.1 58.8,13.6 60.0,14.1 61.2,14.4 62.4,14.7 63.6,14.9 64.8,15.0 66.0,15.0 67.2,14.9 68.4,14.7 69.6,14.5 70.8,14.1 72.0,13.7 73.2,13.1 74.4,12.5 75.6,11.8 76.8,10.9 78.0,10.0 79.2,9.0 80.4,8.0 81.6,6.8 82.8,5.5 84.0,4.2 85.2,2.7 86.4,1.2 87.6,0.2 88.8,1.0 90.0,1.6 91.2,2.2 92.4,2.7 93.6,3.1 94.8,3.4 96.0,3.6 97.2,3.7 98.4,3.7 99.6,3.7 100.8,3.5 102.0,3.3 103.2,3.0 104.4,2.5 105.6,2.0 106.8,1.4 108.0,0.7 109.2,0.0 110.4,0.4 111.6,0.7 112.8,0.8 114.0,0.9 115.2,0.9 116.4,0.8 117.6,0.6 118.8,0.4 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p></section><section class="scss"><h3>SCSS</h3><p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutBounce</strong>', function () { … })</code></pre></section></article><article class="easing-description easeInOutBounce"><a class="back" href="#">←<span class="text">所有缓动函数</span></a><h2>easeInOutBounce</h2><div class="graph"><div class="example"><div class="top"></div><div class="bottom"></div></div><div class="dot"></div><svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text><line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text><path d="M0,60 L1.2,59.7 2.4,59.5 3.6,59.6 4.8,59.8 6.0,59.6 7.2,59.0 8.4,58.5 9.6,58.2 10.8,58.1 12.0,58.2 13.2,58.5 14.4,58.9 15.6,59.5 16.8,59.4 18.0,57.9 19.2,56.6 20.4,55.5 21.6,54.5 22.8,53.8 24.0,53.2 25.2,52.8 26.4,52.5 27.6,52.5 28.8,52.6 30.0,53.0 31.2,53.5 32.4,54.2 33.6,55.0 34.8,56.1 36.0,57.3 37.2,58.7 38.4,59.4 39.6,56.2 40.8,53.2 42.0,50.4 43.2,47.8 44.4,45.3 45.6,43.1 46.8,41.0 48.0,39.1 49.2,37.4 50.4,35.8 51.6,34.4 52.8,33.3 54.0,32.3 55.2,31.5 56.4,30.8 57.6,30.4 58.8,30.1 60.0,30.0 61.2,29.9 62.4,29.6 63.6,29.2 64.8,28.5 66.0,27.7 67.2,26.7 68.4,25.6 69.6,24.2 70.8,22.6 72.0,20.9 73.2,19.0 74.4,16.9 75.6,14.7 76.8,12.2 78.0,9.6 79.2,6.8 80.4,3.8 81.6,0.6 82.8,1.3 84.0,2.7 85.2,3.9 86.4,5.0 87.6,5.8 88.8,6.5 90.0,7.0 91.2,7.4 92.4,7.5 93.6,7.5 94.8,7.2 96.0,6.8 97.2,6.2 98.4,5.5 99.6,4.5 100.8,3.4 102.0,2.1 103.2,0.6 104.4,0.5 105.6,1.1 106.8,1.5 108.0,1.8 109.2,1.9 110.4,1.8 111.6,1.5 112.8,1.0 114.0,0.4 115.2,0.2 116.4,0.4 117.6,0.5 118.8,0.3 120.0,0.0"></path></svg></div><section class="css"><h3>CSS</h3><p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p></section><section class="scss"><h3>SCSS</h3><p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p></section><section class="js"><h3>JavaScript</h3><p>使用 jQuery 加上 <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutBounce</strong>', function () { … })</code></pre></section></article></div></div></div> <script> jQuery.easing.jswing = jQuery.easing.swing, jQuery.extend(jQuery.easing, { def: "easeOutQuad", swing: function(n, e, t, a, i) { return jQuery.easing[jQuery.easing.def](n, e, t, a, i) }, easeInQuad: function(n, e, t, a, i) { return a * (e /= i) * e + t }, easeOutQuad: function(n, e, t, a, i) { return - a * (e /= i) * (e - 2) + t }, easeInOutQuad: function(n, e, t, a, i) { return (e /= i / 2) < 1 ? a / 2 * e * e + t: -a / 2 * (--e * (e - 2) - 1) + t }, easeInCubic: function(n, e, t, a, i) { return a * (e /= i) * e * e + t }, easeOutCubic: function(n, e, t, a, i) { return a * ((e = e / i - 1) * e * e + 1) + t }, easeInOutCubic: function(n, e, t, a, i) { return (e /= i / 2) < 1 ? a / 2 * e * e * e + t: a / 2 * ((e -= 2) * e * e + 2) + t }, easeInQuart: function(n, e, t, a, i) { return a * (e /= i) * e * e * e + t }, easeOutQuart: function(n, e, t, a, i) { return - a * ((e = e / i - 1) * e * e * e - 1) + t }, easeInOutQuart: function(n, e, t, a, i) { return (e /= i / 2) < 1 ? a / 2 * e * e * e * e + t: -a / 2 * ((e -= 2) * e * e * e - 2) + t }, easeInQuint: function(n, e, t, a, i) { return a * (e /= i) * e * e * e * e + t }, easeOutQuint: function(n, e, t, a, i) { return a * ((e = e / i - 1) * e * e * e * e + 1) + t }, easeInOutQuint: function(n, e, t, a, i) { return (e /= i / 2) < 1 ? a / 2 * e * e * e * e * e + t: a / 2 * ((e -= 2) * e * e * e * e + 2) + t }, easeInSine: function(n, e, t, a, i) { return - a * Math.cos(e / i * (Math.PI / 2)) + a + t }, easeOutSine: function(n, e, t, a, i) { return a * Math.sin(e / i * (Math.PI / 2)) + t }, easeInOutSine: function(n, e, t, a, i) { return - a / 2 * (Math.cos(Math.PI * e / i) - 1) + t }, easeInExpo: function(n, e, t, a, i) { return 0 == e ? t: a * Math.pow(2, 10 * (e / i - 1)) + t }, easeOutExpo: function(n, e, t, a, i) { return e == i ? t + a: a * ( - Math.pow(2, -10 * e / i) + 1) + t }, easeInOutExpo: function(n, e, t, a, i) { return 0 == e ? t: e == i ? t + a: (e /= i / 2) < 1 ? a / 2 * Math.pow(2, 10 * (e - 1)) + t: a / 2 * ( - Math.pow(2, -10 * --e) + 2) + t }, easeInCirc: function(n, e, t, a, i) { return - a * (Math.sqrt(1 - (e /= i) * e) - 1) + t }, easeOutCirc: function(n, e, t, a, i) { return a * Math.sqrt(1 - (e = e / i - 1) * e) + t }, easeInOutCirc: function(n, e, t, a, i) { return (e /= i / 2) < 1 ? -a / 2 * (Math.sqrt(1 - e * e) - 1) + t: a / 2 * (Math.sqrt(1 - (e -= 2) * e) + 1) + t }, easeInElastic: function(n, e, t, a, i) { var r = 1.70158, o = 0, s = a; if (0 == e) return t; if (1 == (e /= i)) return t + a; if (o || (o = .3 * i), s < Math.abs(a)) { s = a; var r = o / 4 } else var r = o / (2 * Math.PI) * Math.asin(a / s); return - (s * Math.pow(2, 10 * (e -= 1)) * Math.sin(2 * (e * i - r) * Math.PI / o)) + t }, easeOutElastic: function(n, e, t, a, i) { var r = 1.70158, o = 0, s = a; if (0 == e) return t; if (1 == (e /= i)) return t + a; if (o || (o = .3 * i), s < Math.abs(a)) { s = a; var r = o / 4 } else var r = o / (2 * Math.PI) * Math.asin(a / s); return s * Math.pow(2, -10 * e) * Math.sin(2 * (e * i - r) * Math.PI / o) + a + t }, easeInOutElastic: function(n, e, t, a, i) { var r = 1.70158, o = 0, s = a; if (0 == e) return t; if (2 == (e /= i / 2)) return t + a; if (o || (o = .3 * i * 1.5), s < Math.abs(a)) { s = a; var r = o / 4 } else var r = o / (2 * Math.PI) * Math.asin(a / s); return 1 > e ? -.5 * s * Math.pow(2, 10 * (e -= 1)) * Math.sin(2 * (e * i - r) * Math.PI / o) + t: s * Math.pow(2, -10 * (e -= 1)) * Math.sin(2 * (e * i - r) * Math.PI / o) * .5 + a + t }, easeInBack: function(n, e, t, a, i, r) { return void 0 == r && (r = 1.70158), a * (e /= i) * e * ((r + 1) * e - r) + t }, easeOutBack: function(n, e, t, a, i, r) { return void 0 == r && (r = 1.70158), a * ((e = e / i - 1) * e * ((r + 1) * e + r) + 1) + t }, easeInOutBack: function(n, e, t, a, i, r) { return void 0 == r && (r = 1.70158), (e /= i / 2) < 1 ? a / 2 * e * e * (((r *= 1.525) + 1) * e - r) + t: a / 2 * ((e -= 2) * e * (((r *= 1.525) + 1) * e + r) + 2) + t }, easeInBounce: function(n, e, t, a, i) { return a - jQuery.easing.easeOutBounce(n, i - e, 0, a, i) + t }, easeOutBounce: function(n, e, t, a, i) { return (e /= i) < 1 / 2.75 ? 7.5625 * a * e * e + t: 2 / 2.75 > e ? a * (7.5625 * (e -= 1.5 / 2.75) * e + .75) + t: 2.5 / 2.75 > e ? a * (7.5625 * (e -= 2.25 / 2.75) * e + .9375) + t: a * (7.5625 * (e -= 2.625 / 2.75) * e + .984375) + t }, easeInOutBounce: function(n, e, t, a, i) { return i / 2 > e ? .5 * jQuery.easing.easeInBounce(n, 2 * e, 0, a, i) + t: .5 * jQuery.easing.easeOutBounce(n, 2 * e - i, 0, a, i) + .5 * a + t } }), window.after = function(n, e) { return setTimeout(e, n) }, window.evil || (window.evil = {}), evil.win = $(window), evil.doc = $(document), evil.body = null, evil.doc.ready(function() { evil.body = $("body") }), function() { var n = !1; evil.transform3d = { check: function() { if ("undefined" != typeof n) return n; var n = "undefined" != typeof evil.body.css("perspective"), e = document.body; return n && "undefined" != typeof e.webkitPerspective && (n = matchMedia("(transform-3d), (-webkit-transform-3d)"), n = n.matches), n }, init: function() { n || (n = !0, evil.doc.ready(function() { var n = evil.transform3d.check() ? "3d": "2d"; evil.body.addClass("transform-" + n) })) } } } (), evil.transform3d.init(), function() { evil.doc.ready(function(n) { var e, t, a, i, r, o, s, u, c, f, l, d, h, p, v, m, g, w, M, y, C, I; return c = n(".easings li"), s = n(".easing-description"), e = null, f = function(n) { var e; return e = evil.win.scrollTop(), document.location.hash = n, evil.win.scrollTop(e) }, v = function(e, t) { return n("html, body").animate({ scrollTop: e }, 600, t) }, n("a[href^=#]").click(function() { return f(n(this).attr("href")), !1 }), c.find(".easing-title").mousedown(function() { return n(this).closest(".easing").removeClass("is-clickable") }), c.find(".easing-title").mouseup(function() { return n(this).closest(".easing").addClass("is-clickable") }), c.on("touchstart", function() { return n(this).addClass("is-tapped") }), c.mouseenter(function() { var e, t; return e = n(this), e.hasClass("is-tapped") ? void 0 : (c.removeClass("is-tapped"), t = e.find(".easing-title").text(), e.find(".example").stop().css({ marginTop: 0 }).delay(400).animate({ marginTop: -60 }, 1e3, t), e.find(".dot").stop().css({ marginTop: 0, marginLeft: 0 }).delay(400).animate({ marginTop: -60, marginLeft: 119 }, { duration: 1e3, specialEasing: { marginTop: t, marginLeft: "linear" } })) }), m = n(".easings"), I = m.find(".part-title"), I.mouseenter(function() { return m.addClass("hightlight-part") }), I.mouseleave(function() { return m.removeClass("hightlight-part") }), a = function(n) { return n.hasClass("exampled") ? void 0 : (n.find(".example").stop().css({ marginTop: 0 }), n.find(".dot").stop().css({ marginTop: 0, marginLeft: 0 })) }, g = function(n) { var e; if (!n.hasClass("exampled")) return e = n.find("h2").text(), n.addClass("exampled"), after(400, function() { return n.find(".example").animate({ marginTop: -78 }, 1e3, e), n.find(".dot").animate({ marginTop: -78, marginLeft: 154 }, { duration: 1e3, specialEasing: { marginTop: e, marginLeft: "linear" }, complete: function() { return after(400, function() { return n.removeClass("exampled") }) } }) }) }, s.on("open", function() { return g(n(this)) }), s.on("close", function() { return a(n(this)) }), s.find(".graph").on("mouseenter click", function() { var e; return e = n(this).closest(".easing-description"), a(e), g(e) }), u = n(".easing-description"), M = n(".slide-slider"), l = null, h = !1, w = function() { var n, t; if ("#" === location.hash || "" === location.hash) { if (!h) return; return evil.body.removeClass("easing-page"), after(600, function() { return null != l && l.trigger("close"), e ? v(e) : void 0 }) } return n = location.hash.slice(1), u.hide(), l = u.filter("." + n).show(), evil.body.addClass("easing-page"), h ? (e = evil.win.scrollTop(), t = l.offset().top + 10, after(600, function() { return e > t ? v(t, function() { return l.trigger("open") }) : l.trigger("open") })) : after(800, function() { return l.trigger("open") }) }, w(), evil.win.on("hashchange", w), after(1, function() { return h = !0, evil.body.addClass("page-animation") }), evil.win.on("keyup", function(n) { return 27 === n.keyCode ? location.hash = "": void 0 }), i = n(".open-source"), d = function(n) { return n.replace(/-[^-]+$/, "") }, p = d(n("html").attr("lang")), C = d(navigator.language || navigator.userLanguage), p !== C && i.addClass("user-can-translate"), r = !1, o = function() { var n, e, t, a, o, s; if (! (evil.win.width() < 600)) return r = !0, evil.win.off("resize.corner"), evil.body.hasClass("transform-3d") ? (a = i.find(".shadow"), t = i.find(".rotator"), n = t.css("transition-duration"), n = 1e3 * parseFloat(n), o = function() { return a.is(":animated") ? a.stop(!0).animate({ opacity: 0 }, n / 2, "easeOutQuart") : a.animate({ opacity: 1 }, n / 2, "easeInQuart").animate({ opacity: 0 }, n / 2, "easeOutQuart") }, s = function() { return i.addClass("show"), o() }, e = function() { return i.removeClass("show tappable"), o() }) : (s = function() { return i.addClass("show") }, e = function() { return i.removeClass("show tappable") }), i.mouseenter(s), i.mouseleave(e), i.find(".crop").on("touchend", function() { return i.hasClass("show") ? e() : (s(), i.addClass("tappable")), !1 }) }, o(), r || evil.win.on("resize.corner", o), y = n(".star"), evil.body.width() > 430 && evil.win.load(function() { return y.html(y.text()).addClass("is-enable"), y.find("iframe").on("load", function() { return y.addClass("is-show") }), after(5e3, function() { return y.addClass("is-show") }) }), t = n("<select />").insertAfter("footer ul").change(function() { return location.href = n(this).val() + location.hash }), n("footer li").each(function() { var e, a, i; return a = n(this).find("a, span"), e = a.attr("href") || location.pathname, i = n("<option />").attr({ value: e }).text(a.text()), a.is("span") && i.attr({ selected: !0 }), i.appendTo(t) }), n("footer ul").hide() }) }.call(this); </script> </body> </html>
浙公网安备 33010602011771号