title: Animate text to the top-right corner of the screen
body: <p>I have a question with 4 options on the webpage.The score board is on the top-right corner of the screen</p>
  
  <pre><code>&lt;div id="score" style="position:fixed;top:0;right:0;"&gt;
  &lt;p&gt;&lt;b&gt;Score:&lt;/b&gt;1234&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now when the user hits the correct answer in the first attempt I want to fade-in the text <code>+10</code> on the center of the screen which then floats to the top-right corner where score is increased by 10.</p>
  
  <p>I am done with the logical part which is updating the score,but the CSS part is creating headache for me.For fade-in the text "+10" (maybe I can use z-index to make it appear out of the screen) and animate it to top-right corner, I need slight help with either a snippet or a tutorial.</p>
  
  <p>I have intermediate experience in CSS and couldn't figure out the trick for the required animation.I tried on google but having problem with the keywords.Please help  </p>