title: Moving text with CSS
body: <p>I'm trying to move a line of text back and forth inside a colored background box. I can do this beautifully with the marquee tag, but as I heard its usage is not recommended so I decided to use CSS instead. Although I copied the form of the animation function from CSS tutorials but I can't figure out why the line doesn't move. Could you show me what's wrong with my code?</p>
  
  <p>My HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="content-type" content="text/html" charset="UTF-8"&gt;
          &lt;title&gt;Part 1&lt;/title&gt;
          &lt;link rel="stylesheet" content="text/css" href="part1-2.css"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="background"&gt;
              &lt;div class="title"&gt;I'm moving&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My CSS code:</p>
  
  <pre><code>div.background
  {
      width: 100%;
      height: 50px;
      background-color: #ffcc00;
  }
  
  div.title
  {
      position: relative;
      font-family: Arial;
      font-size: 25px;
      font-weight: bold;
      -webkit-animation: movingtitle 10s infinite alternate linear;
      animation: movingtitle 10s infinite alternate linear;
  }
  
  @-webkit-keyframes movingtitle
  {
      from {left: 0px;}
      to {left: 1366px;}
  }
  </code></pre>