title: Text animation using css to fade out and in a part of the text
body: <p>I'm trying to animate some text and I'm having some problems getting the result that I want. I have a poem (each sentence in its own div) that I wish to fade out, then fade in on hover, remain visible for a while, and then fade out again. Sort of like a game of finding the text and giving the user a hint on where to hover. </p>
  
  <p>Here is the code that I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.poem {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  }
  
  .hide {
  opacity: 0;
  transition: all ease 15s;
  }
  
  .hide:hover {
  border: 1px solid black;
  opacity: 1;
  }
  
  .hint {
  -webkit-animation: fadeinout 30s linear forwards;
  animation: fadeinout 5s linear forwards;
  }
  
  @-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
  }
  
  @keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Cardo" rel="stylesheet"&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;title&gt;Opacity 1&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
      &lt;div class="hint poem hide"&gt;I have emotions&lt;/div&gt;
      &lt;div class="poem hide"&gt;that are like newspapers that&lt;/div&gt;
      &lt;div class="poem hide"&gt;read themselves.&lt;/div&gt;
      &lt;div class="poem hide"&gt;I go for days at a time&lt;/div&gt;
      &lt;div class="poem hide"&gt;trapped in the want ads.&lt;/div&gt;
      &lt;div class="poem hide"&gt;I feel as if I am an ad&lt;/div&gt;
      &lt;div class="poem hide"&gt;for the sale of a haunted house:&lt;/div&gt;
      &lt;div class="poem hide"&gt;18 rooms&lt;/div&gt;
      &lt;div class="poem hide"&gt;$37,000&lt;/div&gt;
      &lt;div class="poem hide"&gt;I'm yours&lt;/div&gt;
      &lt;div class="poem"&gt;ghosts and all.&lt;/div&gt;
      &lt;div class="poem hide"&gt;Richard Brautigan&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So far I've only tried it with css but I would welcome any javascript suggestions too !</p>
  
  <p>Any help would be extremely appreciated !</p>
  
  <p>Thanks in advance !</p>