title: anime.js : Simple text animation won't show (with grid layout)
body: <p>I am trying to animate a text in a grid layout using <code>anime.js</code> library, but the animation won't show. It only uses one HTML file.</p>
  
  <p>The <code>javascript</code>:</p>
  
  <pre><code>&lt;script&gt;
  
  import anime from 'animejs';
  
  anime({
    targets: 'container.decor1.HLF',
    translateY: [
      { value: 100, duration: 1200 },
      { value: 0, duration: 800 }
    ],
    duration: 2000,
    loop: true
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The html tags to be animated:</p>
  
  <pre><code>&lt;div class = "container"&gt;
      &lt;div class = "decor1"&gt;
          &lt;p class = "HLF"&gt;
          HLF
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How to solve this problem? Thanks.</p>
  
  <p>Here is the full code: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  
  import anime from 'animejs';
  
  anime({
    targets: 'container.decor1.HLF',
    translateY: [
      { value: 100, duration: 1200 },
      { value: 0, duration: 800 }
    ],
    duration: 2000,
    loop: true
  });
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;style&gt;
  
  .tweets {grid-area: tweets; background: rgb(240, 240, 240, 0.5); padding: 40px;
           margin: 15px; font-family: arial}
  .quotes {grid-area: quotes; background: turquoise; padding: 20px;
           margin: 15px; font-family: helvetica; color: white; font-size: 20px}
  .decor1 {grid-area: decor1; background: rgb(50, 50, 50, 0.5); padding: 5px;
           margin: 15px; font-family: helvetica; text-align: center}
  .HLF { color: white; font-size: 200px; margin:1px}
  .distributor { color: white; font-size: 20px; margin:1px}
  .visual {grid-area: visual; background: rgb(0, 50, 200, 0.6); padding: 20px;
           margin: 10px; font-family: helvetica; font-size: 20px;
           border: none; border-radius: 10px; color: white}
  .product {grid-area: product; background: rgb(35, 35, 35, 0.7); padding: 20px;
            margin: 10px; font-family: helvetica; font-size: 20px; border: none;
            border-radius: 10px; color: white}
  
  .container {
  
      display: grid;
      grid-template-areas:
          'tweets quotes decor1'
          'tweets visual product';
      background-color: rgb(0, 100, 0, 0.8);
      padding: 100px;
  
      }
  
  .quote-1, 
  .quote-2, 
  .quote-3 {
      animation-duration: 20s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
  }
  
  .quote-1{
      animation-name: quote-1;
  }
  
  .quote-2{
      animation-name: quote-2;
  }
  
  .quote-3{
      animation-name: quote-3;
  }
  
  
  &lt;/style&gt;
  
  
  &lt;body style = "background: white"&gt;
  
  &lt;div class = "container"&gt;
      &lt;div class = "tweets"&gt;
      &lt;center&gt;
      &lt;a class="twitter-timeline" data-width="250" data-height="350" data-dnt="true" data-theme="dark" href="https://twitter.com/Herbalife24?ref_src=twsrc%5Etfw"&gt;Tweets by Herbalife24&lt;/a&gt;
      &lt;script async src="https://platform.twitter.com/widgets.js" charset="utf-8"&gt;&lt;/script&gt; 
      &lt;/center&gt;
      &lt;/div&gt;
      &lt;div class = "quotes"&gt;
          &lt;p class = "quote-1"&gt;
          "Tubuh kita memuat 65% air." 
          &lt;/p&gt;
      &lt;p class = "quote-2"&gt;
          "Tubuh kita memuat 65% air."
          &lt;/p&gt;
      &lt;p class = "quote-3"&gt;
      "Tubuh kita memuat 65% air."
          &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class = "decor1"&gt;
          &lt;p class = "HLF"&gt;
          HLF
          &lt;/p&gt;
      &lt;p class = "distributor"&gt;
          Independent Distributor
          &lt;/p&gt;    
      &lt;/div&gt;
  
      &lt;button class = "visual" onclick = "alert('Under Development')"&gt; Visualization &lt;/button&gt;
      &lt;button class = "product"&gt; Product &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>