title: Using variables for a CSS animation? (multiple divs using a fade, but I want them to fade to different values)
body: <p>So I have 4 divs, I want one to fade to 1, another to fade to 0.8, and so on. 
  I have </p>
  
  <pre><code>@keyframes fadeIn {
     from { opacity: 0 }
     to { opacity: 1 }
  }
  </code></pre>
  
  <p>with the opacity of each div set to 1, 0.8, 0.6, etc. Is there a way I can make it so they go their desired opacity without them all fading to 1 then snapping to whatever their value is on their element? </p>