fer博客
FERBLOG

本站当前定位为个人的知识库中心。

如果有疑问，可发邮件至2305911934@qq.com

首页>JQUERY插件>其它>anime.js官网_免费、灵活的轻型JavaScript动画库_备份

anime.js官网_免费、灵活的轻型JavaScript动画库_备份

来源：网络收集分类：其它2022-09-150

111
  • 其它编号：20220915111146
  • 其它分类：其它
  • 其它格式：html/css
  • 其它关键词： anime js javascript 
  • index_anime.js官网_免费、灵活的轻型JavaScript动画库_备份源代码<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>anime.js官网_免费、灵活的轻型JavaScript动画库 | animejs</title>
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="anime.js是一个灵活的轻型JavaScript动画库。anime.js遵从MIT开源协议，可应用于各种商业网站或app而无需付费。压缩后仅6K大小，且不依赖任何第三方库，加载迅速。">
  <meta name="keywords" content="amine，animejs，anime.js，anime.js中文文档">
  <link rel="apple-touch-icon-precomposed" href="https://www.animejs.cn/documentation/assets/img/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="https://www.animejs.cn/documentation/assets/img/favicon.png">
  <link href="static/css/animejs.css" rel="stylesheet">
  <link href="static/css/website.css" rel="stylesheet">
  <style>.feature-description-icons .bold{
	  font-family: Arial black, Helvetica, sans-serif;
    font-weight: bolder;
    font-size: 36px;
    margin-bottom: 10px;
    display: block;}
  .head-static-logo{
	  display:none;
	  }
	  </style>
    <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7732a1e7872b3288e11c8d7d3ecc88d6";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body class="index">
<header class="header nav-bar grid-container">
    <div class="nav-bar-content">
      <a href="" class="top-header-logo">
        <div class="main-logo">
        <img class="anime-mini-logo head-static-logo" src="static/picture/anime-mini-logo.svg">
          <div class="logo-animation-wrapper">
            <div class="logo-animation">
              <div class="anime-logo">
              
                <div class="anime-logo-signs">
                  <div class="logo-letter letter-a">
                    <svg class="bounced" viewbox="0 0 200 240" width="200" height="240">
                      <path class="line" d="M30 20h130c9.996 0 10 40 10 60v140H41c-11.004 0-11-40-11-60s-.004-60 10-60h110"></path>
                    </svg>
                  </div>
                  <div class="logo-letter letter-n">
                    <svg class="bounced" viewbox="0 0 200 240" width="200" height="240">
                      <path class="line" d="M170 220V60c0-31.046-8.656-40-19.333-40H49.333C38.656 20 30 28.954 30 60v160"></path>
                    </svg>
                  </div>
                  <div class="logo-letter letter-i">
                    <svg class="bounced" viewbox="0 0 60 240" width="60" height="240">
                      <path class="line" d="M30 20v200" data-d2="M30 100v120"></path>
                    </svg>
                  </div>
                  <div class="logo-letter letter-m">
                    <svg class="bounced" viewbox="0 0 340 240" width="340" height="240" fill="none" fill-rule="evenodd">
                      <path class="line" d="M240,220 L240,60 C240,28.954305 231.344172,20 220.666667,20 C171.555556,20 254.832031,20 170,20 C85.1679688,20 168.444444,20 119.333333,20 C108.655828,20 100,28.954305 100,60 L100,220" data-d2="M310,220 L310,60 C310,28.954305 301.344172,20 290.666667,20 C241.555556,20 254.832031,110 170,110 C85.1679688,110 98.4444444,20 49.3333333,20 C38.6558282,20 30,28.954305 30,60 L30,220" data-d3="M310,220 L310,60 C310,28.954305 301.344172,20 290.666667,20 C241.555556,20 254.832031,20 170,20 C85.1679688,20 98.4444444,20 49.3333333,20 C38.6558282,20 30,28.954305 30,60 L30,220"></path>
                    </svg>
                  </div>
                  <div class="logo-letter letter-e">
                    <svg class="bounced" viewbox="0 0 200 240" width="200" height="240">
                      <path class="line" d="M50 140h110c10 0 10-40 10-60s0-60-10-60H40c-10 0-10 40-10 60v80c0 20 0 60 10 60h130"></path>
                    </svg>
                  </div>
                  <div class="bounce">
                    <svg viewbox="0 0 1000 260" width="1000" height="260" fill="none">
                      <path d="M630,240 C630,111.154418 608.971354,40 530.160048,40 C451.348741,40 430,127.460266 430,210"></path>
                    </svg>
                    <div class="dot"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a>
      <nav class="nav-menu">
      
      
        <a class="nav-link" href="index1.html">使用方法</a>
        <a class="nav-link" href="index2.html">中文文档</a>
        <a class="nav-link" href="javascript:;" target="_blank">Codepen演示</a>
        <a class="nav-link" href="index3.html">基础演示</a>
        <a class="nav-link" href="javascript:;" target="_blank" title="942475640">加入QQ群</a> 
        <a class="nav-link" href="javascript:;" target="_blank">anime.js 英文网</a>
        <a class="nav-link" href="javascript:;" target="_blank" title="本站无法访问时可使用备用网址">备用网址</a>
        <a href="javascript:;" class="main-cta">下载 v<span class="version-number">3.1.0</span></a>
        
      </nav>
    </div>
  </header>
  <section id="intro" class="feature-section section-intro">

    <div class="grid-container">

      <div class="feature-animation">
        <div class="easing-visualizer">
          <div class="wrapper bars-wrapper"></div>
          <div class="wrapper dots-wrapper"></div>
        </div>
      </div>

      <div class="feature-description feature-description-grid">
        
        
        
        
        <div class="feature-description-icons">
          <nav class="feature-icons-container horizontal-icons secondary-menu">
            <a class="feature-icon">
              <span class="bold">MIT</span>
              <figcaption class="feature-caption">免费·开源</figcaption>
            </a>
            <a class="feature-icon">
              <span class="bold">6K</span>
              <figcaption class="feature-caption">文件极小</figcaption>
            </a>
            <a class="feature-icon">
              <span class="bold">EASY</span>
              <figcaption class="feature-caption">简单易用</figcaption>
            </a>
          </nav>
        </div>
        
        
        
        
        <div class="feature-description-text">
          <p class="feature-paragraph">
            <em>Anime.js</em> (<code>/ˈæn.ə.meɪ/</code>) 是一个轻量的JavaScript 动画库， 拥有简单而强大的API。<br>可对 CSS 属性、 SVG、 DOM 和JavaScript 对象进行动画。
          </p>
          <p class="feature-paragraph">
            <a href="index1.html" class="primary arrow scroll-to-getting-started">开始使用</a>
          </p>
        </div>
      </div>

    </div>

  </section>

  <section id="staggering" class="feature-section section-feature-staggering inverted-section">

    <div class="grid-container">

      <div class="feature-description">
        <h1 class="feature-title">
          交错动画
        </h1>
        <h2 class="feature-subtitle">
          通过简单的动画制作。
        </h2>
      </div>

      <div class="feature-animation">
        <div class="stagger-visualizer">
          <div class="cursor color-red"></div>
          <div class="dots-wrapper"></div>
        </div>
      </div>

      <div class="feature-description feature-description-grid">
        <div class="feature-description-icons">
          <div class="feature-icons-container vertical-icons">
            <figure class="feature-icon">
              <img src="static/picture/icon-staggering-forward.svg">
              <figcaption class="feature-caption">forward</figcaption>
            </figure>
            <figure class="feature-icon">
              <img src="static/picture/icon-staggering-index.svg">
              <figcaption class="feature-caption">from index</figcaption>
            </figure>
            <figure class="feature-icon">
              <img src="static/picture/icon-staggering-center.svg">
              <figcaption class="feature-caption">from center</figcaption>
            </figure>
            <figure class="feature-icon">
              <img src="static/picture/icon-staggering-easing.svg">
              <figcaption class="feature-caption">easing</figcaption>
            </figure>
            <figure class="feature-icon">
              <img src="static/picture/icon-staggering-reverse.svg">
              <figcaption class="feature-caption">reversed</figcaption>
            </figure>
            <figure class="feature-icon">
              <img src="static/picture/icon-staggering-grid.svg">
              <figcaption class="feature-caption">ripple</figcaption>
            </figure>
          </div>
        </div>
        <div class="feature-description-text">
          <p class="feature-paragraph">
           anime.js 的内置交错系统使复杂的动画和重叠动画变得简单。它可以用于时间和属性。
          </p>
          <p class="feature-paragraph">
            <a href="index2.html#staggeringBasics" class="primary arrow">进一步了解 staggering</a>
          </p>
        </div>
      </div>

    </div>

  </section>

  <section id="layered-animations" class="feature-section section-feature-layered-animation">

    <div class="grid-container">

      <div class="feature-description">
        <h1 class="feature-title">
          分层CSS转换
        </h1>
        <h2 class="feature-subtitle">
          只需要一个元素。
        </h2>
      </div>

      <div class="feature-animation">
        <div class="layered-animations">
          <svg class="large shape" viewbox="0 0 96 96">
            <defs>
              <lineargradient id="circleGradient" x1="0%" x2="100%" y1="20%" y2="80%">
                <stop stop-color="#373734" offset="0%"></stop>
                <stop stop-color="#242423" offset="50%"></stop>
                <stop stop-color="#0D0D0C" offset="100%"></stop>
              </lineargradient>
            </defs>
            <circle cx="48" cy="48" r="28" fill-rule="evenodd" stroke-linecap="square" fill="url(#circleGradient)"></circle>
          </svg>
          <svg class="small shape color-red" viewbox="0 0 96 96">
            <polygon fill-rule="evenodd" points="48 17.28 86.4 80.11584 9.6 80.11584" stroke-linecap="square"></polygon>
          </svg>
          <svg class="large shape" viewbox="0 0 96 96">
            <defs>
              <lineargradient id="triangleGradient" x1="0%" x2="100%" y1="20%" y2="80%">
                <stop stop-color="#373734" offset="0%"></stop>
                <stop stop-color="#242423" offset="50%"></stop>
                <stop stop-color="#0D0D0C" offset="100%"></stop>
              </lineargradient>
            </defs>
            <polygon fill-rule="evenodd" points="48 17.28 86.4 80.11584 9.6 80.11584" stroke-linecap="square" fill="url(#triangleGradient)"></polygon>
          </svg>
          <svg class="x-small shape" viewbox="0 0 96 96">
            <polygon fill-rule="evenodd" points="48 17.28 86.4 80.11584 9.6 80.11584" stroke-linecap="square"></polygon>
          </svg>
          <svg class="x-small shape" viewbox="0 0 96 96">
            <rect width="48" height="48" x="24" y="24" fill-rule="evenodd" stroke-linecap="square"></rect>
          </svg>
          <svg class="small shape color-red" viewbox="0 0 96 96">
            <rect width="48" height="48" x="24" y="24" fill-rule="evenodd" stroke-linecap="square"></rect>
          </svg>
          <svg class="large shape" viewbox="0 0 96 96">
            <defs>
              <lineargradient id="rectGradient" x1="0%" x2="100%" y1="20%" y2="80%">
                <stop stop-color="#373734" offset="0%"></stop>
                <stop stop-color="#242423" offset="50%"></stop>
                <stop stop-color="#0D0D0C" offset="100%"></stop>
              </lineargradient>
            </defs>
            <rect width="48" height="48" x="24" y="24" fill-rule="evenodd" stroke-linecap="square" fill="url(#rectGradient)"></rect>
          </svg>
          <svg class="small shape color-red" viewbox="0 0 96 96">
            <circle cx="48" cy="48" r="32" fill-rule="evenodd" stroke-linecap="square"></circle>
          </svg>
          <svg class="x-small shape" viewbox="0 0 96 96">
            <circle cx="48" cy="48" r="32" fill-rule="evenodd" stroke-linecap="square"></circle>
          </svg>
        </div>
      </div>

      <div class="feature-description feature-description-grid">
        <div class="feature-description-icons">
          <figure class="transform-anim">
            <figcaption class="feature-caption">translateX</figcaption>
            <div class="transform-timeline"><div class="transform-progress"></div></div>
          </figure>
          <figure class="transform-anim">
            <figcaption class="feature-caption">translateY</figcaption>
            <div class="transform-timeline"><div class="transform-progress"></div></div>
          </figure>
          <figure class="transform-anim">
            <figcaption class="feature-caption">rotate</figcaption>
            <div class="transform-timeline"><div class="transform-progress"></div></div>
          </figure>
          <figure class="transform-anim">
            <figcaption class="feature-caption">scale</figcaption>
            <div class="transform-timeline"><div class="transform-progress"></div></div>
          </figure>
        </div>
        <div class="feature-description-text">
          <p class="feature-paragraph">
           动画多个CSS在单个HTML元素上同时使用不同的时序转换属性。
          </p>
          <p class="feature-paragraph">
            <a href="index2.html#animationKeyframes" class="primary arrow">详细了解关键帧</a>
          </p>
        </div>
      </div>

    </div>

  </section>

  <section id="controls-and-callbacks" class="feature-section section-feature-control inverted-section">

    <div class="grid-container large-grid">

      <div class="feature-description">
        <h1 class="feature-title">控制和回调</h1>
        <h2 class="feature-subtitle">
          时间就是一切。
        </h2>
      </div>

      <div class="feature-animation">

        <div class="time-control">
          <div class="ruller">
            <div class="time-cursor color-red">
              <input value="999">
            </div>
          </div>
          <div class="timeline">
            <div class="info-loop-begin info info-large info-left info-bottom" data-delay="0">
              <div class="info-bar"></div>
              <figcaption class="feature-caption">animation begin</figcaption>
              <figcaption class="feature-caption">loop 1 begin</figcaption>
            </div>
            <div class="animation">
              <div class="animation-band animation-delay"></div>
              <div class="info-change-begin info info-left info-bottom" data-delay="100">
                <div class="info-bar"></div>
                <figcaption class="feature-caption">change begin</figcaption>
              </div>
              <div class="animation-band animation-change"></div>
              <div class="info-change-complete info info-right info-top" data-delay="400">
                <div class="info-bar"></div>
                <figcaption class="feature-caption">change complete</figcaption>
              </div>
              <div class="animation-band animation-end-delay"></div>
            </div>
            <div class="info-loop-complete info info-large info-right info-top" data-delay="500">
              <div class="info-bar"></div>
              <figcaption class="feature-caption">loop 1 complete</figcaption>
            </div>
            <div class="info info-large info-left info-bottom" data-delay="500">
              <div class="info-bar"></div>
              <figcaption class="feature-caption">reverse</figcaption>
              <figcaption class="feature-caption">loop 2 begin</figcaption>
            </div>
            <div class="animation">
              <div class="animation-band animation-end-delay"></div>
              <div class="info-change-begin info info-left info-bottom" data-delay="600">
                <div class="info-bar"></div>
                <figcaption class="feature-caption">change begin</figcaption>
              </div>
              <div class="animation-band animation-change"></div>
              <div class="info-change-complete info info-right info-top" data-delay="900">
                <div class="info-bar"></div>
                <figcaption class="feature-caption">change complete</figcaption>
              </div>
              <div class="animation-band animation-delay"></div>
            </div>
            <div class="info-loop-complete info info-large info-right info-top" data-delay="1000">
              <div class="info-bar"></div>
              <figcaption class="feature-caption">loop 2 complete</figcaption>
            </div>
            <div class="info info-large info-left info-bottom" data-delay="1000">
              <div class="info-bar"></div>
              <figcaption class="feature-caption">reverse</figcaption>
              <figcaption class="feature-caption">loop 3 begin</figcaption>
            </div>
            <div class="animation">
              <div class="animation-band animation-delay"></div>
              <div class="info-change-begin info info-left info-bottom" data-delay="1100">
                <div class="info-bar"></div>
                <figcaption class="feature-caption">change begin</figcaption>
              </div>
              <div class="animation-band animation-change"></div>
              <div class="info-change-complete info info-right info-top" data-delay="1400">
                <div class="info-bar"></div>
                <figcaption class="feature-caption">change complete</figcaption>
              </div>
              <div class="animation-band animation-end-delay"></div>
            </div>
            <div class="info-loop-complete info info-large info-right info-top" data-delay="1500">
              <div class="info-bar"></div>
              <figcaption class="feature-caption">loop 3 complete</figcaption>
              <figcaption class="feature-caption">animation complete</figcaption>
            </div>
          </div>

        </div>

      </div>

      <div class="feature-description feature-description-grid">
        <div class="feature-description-icons">
          <div class="feature-icons-container vertical-icons">
            <figure class="feature-icon timeline-icon">
              <div class="animation-band animation-delay"></div>
              <figcaption class="feature-caption">delay</figcaption>
            </figure>
            <figure class="feature-icon timeline-icon">
              <div class="animation-band animation-end-delay"></div>
              <figcaption class="feature-caption">end-delay</figcaption>
            </figure>
            <figure class="feature-icon timeline-icon">
              <div class="animation-band animation-change"></div>
              <figcaption class="feature-caption">change</figcaption>
            </figure>
          </div>
        </div>
        <div class="feature-description-text">
          <p class="feature-paragraph">
           使用完整的内置回调和控制功能，同步播放，暂停，控制，反向和触发事件。
          </p>
          <p class="feature-paragraph">
            <a href="index2.html#update" class="primary arrow">进一步了解callbacks</a>
          </p>
        </div>
      </div>

    </div>

  </section>

  <section id="animate-anything" class="feature-section section-feature-animate">

    <div class="grid-container">

      <div class="feature-description">
        <h1 class="feature-title">
          动画任何东西
        </h1>
        <h2 class="feature-subtitle">
          HTML，JS，CSS，SVG。
        </h2>
      </div>

      <div class="feature-animation square-animation">
        <div class="sphere-animation">
          <svg class="sphere" viewbox="0 0 440 440">
            <defs>
              <lineargradient id="sphereGradient" x1="0%" x2="0%" y1="0%" y2="0%">
                <stop stop-color="#373734" offset="0%"></stop>
                <stop stop-color="#242423" offset="50%"></stop>
                <stop stop-color="#0D0D0C" offset="100%"></stop>
              </lineargradient>
            </defs>
            <path d="M361.604 361.238c-24.407 24.408-51.119 37.27-59.662 28.727-8.542-8.543 4.319-35.255 28.726-59.663 24.408-24.407 51.12-37.269 59.663-28.726 8.542 8.543-4.319 35.255-28.727 59.662z"></path>
            <path d="M360.72 360.354c-35.879 35.88-75.254 54.677-87.946 41.985-12.692-12.692 6.105-52.067 41.985-87.947 35.879-35.879 75.254-54.676 87.946-41.984 12.692 12.692-6.105 52.067-41.984 87.946z"></path>
            <path d="M357.185 356.819c-44.91 44.91-94.376 68.258-110.485 52.149-16.11-16.11 7.238-65.575 52.149-110.485 44.91-44.91 94.376-68.259 110.485-52.15 16.11 16.11-7.239 65.576-52.149 110.486z"></path>
            <path d="M350.998 350.632c-53.21 53.209-111.579 81.107-130.373 62.313-18.794-18.793 9.105-77.163 62.314-130.372 53.209-53.21 111.579-81.108 130.373-62.314 18.794 18.794-9.105 77.164-62.314 130.373z"></path>
            <path d="M343.043 342.677c-59.8 59.799-125.292 91.26-146.283 70.268-20.99-20.99 10.47-86.483 70.269-146.282 59.799-59.8 125.292-91.26 146.283-70.269 20.99 20.99-10.47 86.484-70.27 146.283z"></path>
            <path d="M334.646 334.28c-65.169 65.169-136.697 99.3-159.762 76.235-23.065-23.066 11.066-94.593 76.235-159.762s136.697-99.3 159.762-76.235c23.065 23.065-11.066 94.593-76.235 159.762z"></path>
            <path d="M324.923 324.557c-69.806 69.806-146.38 106.411-171.031 81.76-24.652-24.652 11.953-101.226 81.759-171.032 69.806-69.806 146.38-106.411 171.031-81.76 24.652 24.653-11.953 101.226-81.759 171.032z"></path>
            <path d="M312.99 312.625c-73.222 73.223-153.555 111.609-179.428 85.736-25.872-25.872 12.514-106.205 85.737-179.428s153.556-111.609 179.429-85.737c25.872 25.873-12.514 106.205-85.737 179.429z"></path>
            <path d="M300.175 299.808c-75.909 75.909-159.11 115.778-185.837 89.052-26.726-26.727 13.143-109.929 89.051-185.837 75.908-75.908 159.11-115.778 185.837-89.051 26.726 26.726-13.143 109.928-89.051 185.836z"></path>
            <path d="M284.707 284.34c-77.617 77.617-162.303 118.773-189.152 91.924-26.848-26.848 14.308-111.534 91.924-189.15C265.096 109.496 349.782 68.34 376.63 95.188c26.849 26.849-14.307 111.535-91.923 189.151z"></path>
            <path d="M269.239 267.989c-78.105 78.104-163.187 119.656-190.035 92.807-26.849-26.848 14.703-111.93 92.807-190.035 78.105-78.104 163.187-119.656 190.035-92.807 26.849 26.848-14.703 111.93-92.807 190.035z"></path>
            <path d="M252.887 252.52C175.27 330.138 90.584 371.294 63.736 344.446 36.887 317.596 78.043 232.91 155.66 155.293 233.276 77.677 317.962 36.521 344.81 63.37c26.85 26.848-14.307 111.534-91.923 189.15z"></path>
            <path d="M236.977 236.61C161.069 312.52 77.867 352.389 51.14 325.663c-26.726-26.727 13.143-109.928 89.052-185.837 75.908-75.908 159.11-115.777 185.836-89.05 26.727 26.726-13.143 109.928-89.051 185.836z"></path>
            <path d="M221.067 220.7C147.844 293.925 67.51 332.31 41.639 306.439c-25.873-25.873 12.513-106.206 85.736-179.429C200.6 53.786 280.931 15.4 306.804 41.272c25.872 25.873-12.514 106.206-85.737 179.429z"></path>
            <path d="M205.157 204.79c-69.806 69.807-146.38 106.412-171.031 81.76-24.652-24.652 11.953-101.225 81.759-171.031 69.806-69.807 146.38-106.411 171.031-81.76 24.652 24.652-11.953 101.226-81.759 171.032z"></path>
            <path d="M189.247 188.881c-65.169 65.169-136.696 99.3-159.762 76.235-23.065-23.065 11.066-94.593 76.235-159.762s136.697-99.3 159.762-76.235c23.065 23.065-11.066 94.593-76.235 159.762z"></path>
            <path d="M173.337 172.971c-59.799 59.8-125.292 91.26-146.282 70.269-20.991-20.99 10.47-86.484 70.268-146.283 59.8-59.799 125.292-91.26 146.283-70.269 20.99 20.991-10.47 86.484-70.269 146.283z"></path>
            <path d="M157.427 157.061c-53.209 53.21-111.578 81.108-130.372 62.314-18.794-18.794 9.104-77.164 62.313-130.373 53.21-53.209 111.58-81.108 130.373-62.314 18.794 18.794-9.105 77.164-62.314 130.373z"></path>
            <path d="M141.517 141.151c-44.91 44.91-94.376 68.259-110.485 52.15-16.11-16.11 7.239-65.576 52.15-110.486 44.91-44.91 94.375-68.258 110.485-52.15 16.109 16.11-7.24 65.576-52.15 110.486z"></path>
            <path d="M125.608 125.241c-35.88 35.88-75.255 54.677-87.947 41.985-12.692-12.692 6.105-52.067 41.985-87.947C115.525 43.4 154.9 24.603 167.592 37.295c12.692 12.692-6.105 52.067-41.984 87.946z"></path>
            <path d="M109.698 109.332c-24.408 24.407-51.12 37.268-59.663 28.726-8.542-8.543 4.319-35.255 28.727-59.662 24.407-24.408 51.12-37.27 59.662-28.727 8.543 8.543-4.319 35.255-28.726 59.663z"></path>
          </svg>
        </div>
      </div>

      <div class="feature-description feature-description-grid">
        <div class="feature-description-icons">
          <nav class="feature-icons-container horizontal-icons">
            <a href="index2.html#domAttr" class="feature-icon">
              <img src="static/picture/icon-html.svg">
              <figcaption class="feature-caption">html</figcaption>
            </a>
            <a href="index2.html#JSobjProp" class="feature-icon">
              <img src="static/picture/icon-js.svg">
              <figcaption class="feature-caption">js</figcaption>
            </a>
            <a href="index2.html#cssProperties" class="feature-icon">
              <img src="static/picture/icon-css.svg">
              <figcaption class="feature-caption">css</figcaption>
            </a>
            <a href="index2.html#svgAttr" class="feature-icon">
              <img src="static/picture/icon-svg.svg">
              <figcaption class="feature-caption">svg</figcaption>
            </a>
          </nav>
        </div>
        <div class="feature-description-text">
          <p class="feature-paragraph">
           Anime.js适用于任何网络。CSS，SVG，DOM属性和JavaScript对象：使用单个统一API为所有内容设置动画。
          </p>
          <p class="feature-paragraph">
            <a href="index2.html#cssProperties" class="primary arrow">了解有关可动画属性的更多信息</a>
          </p>
        </div>
      </div>

    </div>

  </section>

  <section id="getting-started" class="feature-section getting-started-section inverted-section">

    <div class="grid-container">

      <div class="feature-description">
        <h1 class="feature-title">
         入门
        </h1>
        <h2 class="feature-subtitle">
          资源和文档。
        </h2>
      </div>

      <div class="getting-started-blocks">

        <div class="getting-started-block">
          <a href="javascript:;" class="getting-statred-main-link">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 240 136" class="getting-started-image">
              <g id="icon-download" fill="none" fill-rule="evenodd">
                <polygon stroke="currentColor" stroke-width="2" points="1 1 239 1 239 135 1 135"></polygon>
                <polygon stroke="currentColor" points="48 32 192 32 192 40 48 40"></polygon>
                <polygon stroke="currentColor" points="48 56 192 56 192 64 48 64"></polygon>
                <path stroke="currentColor" d="M0 16h240"></path>
                <polygon stroke="currentColor" points="48 40 192 40 192 48 48 48"></polygon>
                <polygon stroke="currentColor" points="48 64 192 64 192 72 48 72"></polygon>
                <polygon stroke="currentColor" points="48 48 192 48 192 56 48 56"></polygon>
                <polygon stroke="currentColor" points="48 72 192 72 192 80 48 80"></polygon>
                <polygon stroke="currentColor" points="48 96 192 96 192 135 48 135"></polygon>
              </g>
            </svg>
            <span class="primary arrow">下载</span>
          </a>
          <ul class="getting-statred-links">
            <li><a class="arrow" href="javascript:;">GitHub project page</a></li>
            <li><a class="arrow" href="javascript:;">Source</a></li>
            <li><a class="arrow" href="javascript:;">ES6 Module</a></li>
            <li><a class="arrow" href="javascript:;">Minified ES5</a></li>
            <li><a class="arrow" href="javascript:;">Issues</a></li>
            <li><a class="arrow" href="javascript:;">Releases</a></li>
          </ul>
        </div>

        <div class="getting-started-block">
          <a href="index2.html" class="getting-statred-main-link">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 240 136" class="getting-started-image">
              <g id="icon-documentation" fill="none" fill-rule="evenodd">
                <polygon stroke="currentColor" stroke-width="2" points="1 1 239 1 239 135 1 135"></polygon>
                <polygon stroke="currentColor" points="56 16 128 16 128 40 56 40"></polygon>
                <polygon stroke="currentColor" points="56 1 128 1 128 16 56 16"></polygon>
                <path stroke="currentColor" d="M0 16h240"></path>
                <polygon stroke="currentColor" points="56 40 128 40 128 64 56 64"></polygon>
                <polygon stroke="currentColor" points="56 64 128 64 128 88 56 88"></polygon>
                <polygon stroke="currentColor" points="56 88 128 88 128 112 56 112"></polygon>
                <polygon stroke="currentColor" points="56 112 128 112 128 136 56 136"></polygon>
              </g>
            </svg>
            <span class="primary arrow">文档</span>
          </a>
          <ul class="getting-statred-links">
            <li><a class="arrow" href="index2.html#cssSelector">动画目标</a></li>
            <li><a class="arrow" href="index2.html#cssProperties">动画属性</a></li>
            <li><a class="arrow" href="index2.html#duration">属性参数</a></li>
            <li><a class="arrow" href="index2.html#direction">方向和循环</a></li>
            <li><a class="arrow" href="index2.html#unitlessValue">动画赋值</a></li>
            <li><a class="arrow" href="index2.html#animationKeyframes">关键帧</a></li>
            <li><a class="arrow" href="index2.html#staggeringBasics">交错动画</a></li>
            <li><a class="arrow" href="index2.html#timelineBasics">时间轴</a></li>
            <li><a class="arrow" href="index2.html#playPause">动画控制</a></li>
            <li><a class="arrow" href="index2.html#update">回调函数</a></li>
            <li><a class="arrow" href="index2.html#motionPath">SVG动画</a></li>
            <li><a class="arrow" href="index2.html#linearEasing">时间曲线</a></li>
            <li><a class="arrow" href="index2.html#remove">动画辅助功能</a></li>
          </ul>
        </div>

        <div class="getting-started-block">
          <a href="javascript:;" class="getting-statred-main-link">
              <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 240 136" class="getting-started-image">
                <g id="icon-examples" fill="none" fill-rule="evenodd">
                  <polygon stroke="currentColor" stroke-width="2" points="1 1 239 1 239 135 1 135"></polygon>
                  <polygon stroke="currentColor" points="0 16 80 16 80 56 0 56"></polygon>
                  <polygon stroke="currentColor" points="80 16 160 16 160 56 80 56"></polygon>
                  <polygon stroke="currentColor" points="160 16 240 16 240 56 160 56"></polygon>
                  <polygon stroke="currentColor" points="0 56 80 56 80 96 0 96"></polygon>
                  <polygon stroke="currentColor" points="80 56 160 56 160 96 80 96"></polygon>
                  <polygon stroke="currentColor" points="160 56 240 56 240 96 160 96"></polygon>
                  <polygon stroke="currentColor" points="0 96 80 96 80 136 0 136"></polygon>
                  <polygon stroke="currentColor" points="80 96 160 96 160 136 80 136"></polygon>
                  <polygon stroke="currentColor" points="160 96 240 96 240 136 160 136"></polygon>
                  <path stroke="currentColor" d="M0 16h240"></path>
                </g>
              </svg>
            <span class="primary arrow">实例</span>
          </a>
          <ul class="getting-statred-links">
            <li><a class="arrow" href="javascript:;">CodePen collection</a>
            <li><a class="arrow" href="javascript:;">juliangarnier.com</a>
            <li><a class="arrow" href="javascript:;">animejs.com</a>
            <li><a class="arrow" href="javascript:;">Moving letters</a>
            <li><a class="arrow" href="javascript:;">Gradient topography</a>
            <li><a class="arrow" href="javascript:;">Organic shape</a>
            <li><a class="arrow" href="javascript:;">Pieces slider</a>
            <li><a class="arrow" href="javascript:;">Staggering animations</a>
            <li><a class="arrow" href="javascript:;">Easings animations</a>
            <li><a class="arrow" href="javascript:;">Sphere animation</a>
            <li><a class="arrow" href="javascript:;">Layered animations</a>
            <li><a class="arrow" href="javascript:;">anime.js logo animation</a>
          </li></ul>
        </div>

      </div>

    </div>

  </section>
<footer class="footer nav-bar grid-container">
    <div class="nav-bar-content">
      <a href="">
        <img class="anime-mini-logo" src="static/picture/anime-mini-logo.svg">
      </a>
      <nav class="nav-menu">
        <a class="nav-link" href="index2.html">文档</a>
        <a class="nav-link" href="index3.html">演示</a>
      </nav>
    </div>
    <div class="nav-bar-content">
      <div class="footer-block">

        <p class="footer-text"><a href="javascript:;" target="_blank">MIT License</a></p>
        <p class="footer-text footer-separator"> | </p>
        <p class="footer-text">2016 - <em class="date">2019</em></p>

      </div>
    </div>
  </footer>


<!-- /footer -->
</body>
<script src="static/js/anime.min.js"></script>
<script src="static/js/website.js"></script>
</html>
40100

特别说明：

1.如有链接无法下载、失效或广告，请联系QQ：2305911934 处理！

2.本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！

3.本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！

4.本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！

5.该模板为静态页面，没有后台，大部分未经测试可用，并不保证百分百无误及完整

如有侵犯您的版权，请及时联系2305911934#qq.com(#换@)，我们将尽快处理。

上一篇：Layui 开发使用文档 - 入门指南备份 下一篇：SVG-Morpheus:svg图标变形插件
相关文章
HTML模板