CSS animation won't work with 'overflow: hidden;'

Question

I would appreciate if someone could point me into the right direction by telling me what I\'m doing wrong. Please look at this example. As you can see I\'m trying to move \'

Answer 1

Another trick could be moving overflow: hidden to the animated element:

http://jsfiddle.net/GLdQs/9/

#id1 {
    width: 0px;
    overflow: hidden;
}

#id1 > p {
    width: 500px; /* you probably want a fixed width for the content  */
}

@-webkit-keyframes slide {
  0%   { left: 500px; top: 0px; width:   0px; }
  100% { left:   0px; top: 0px; width: 500px; }
}

​